<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="js" dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="ru"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="prev" href="http://javascript.ru/tutorial/events/comparison">

<link rel="next" href="http://javascript.ru/tutorial/events/errors">

<link rel="prev" href="http://javascript.ru/tutorial/events/comparison">

<link rel="up" href="http://javascript.ru/tutorial/events">

<link rel="next" href="http://javascript.ru/tutorial/events/errors">

<style type="text/css" media="all">@import "/files/css/4a77d835bd39cbcc5ef0d923c786c461.css";</style>
<script type="text/javascript" src="events_crossbrowser_files/pack.js"></script>
<script type="text/javascript" src="events_crossbrowser_files/ajax_vote_up_down.js"></script>
<script type="text/javascript" src="events_crossbrowser_files/syntaxhighlighter.js"></script>
<script type="text/javascript" src="events_crossbrowser_files/c3dcb5ea943ce52204c8588fb64dcd70.js"></script>
<script type="text/javascript" src="events_crossbrowser_files/default_buttons_functions.js"></script>
<script type="text/javascript" src="events_crossbrowser_files/jquery.js"></script>
<script type="text/javascript" src="events_crossbrowser_files/forms.js"></script>
<script type="text/javascript" src="events_crossbrowser_files/effects.js"></script>
<script type="text/javascript" src="events_crossbrowser_files/effects_002.js"></script>
<script type="text/javascript" src="events_crossbrowser_files/mistype.js"></script>
<script type="text/javascript">Drupal.extend({ settings: { "base_path": "/", "baseurl": "http://javascript.ru/", "uc_ajax_cart": { "url": "/cart/ajax/update", "text": "Записаться...", "effects": false, "emptyHide": 1, "disable": 1, "ddSupport": false, "itemCount": 0, "bclass": "disabled" } } });</script>
<script type="text/javascript">
  SyntaxHighlighter.config.clipboardSwf = '/modules/syntaxhighlighter/sh/scripts/clipboard.swf'
  $(function() { SyntaxHighlighter.highlight() })
  </script>
<script type="text/javascript">var enter_from=''</script>


	
<meta name="keywords" content="">
<meta name="description" content="">
	


<link rel="stylesheet" type="text/css" href="events_crossbrowser_files/style-81884d78-00003.css" id="vbulletin_css">



<link rel="alternate" type="application/rss+xml" title="Статьи на javascript.ru" href="http://javascript.ru/article/feed">
<link rel="alternate" type="application/rss+xml" title="Все материалы с javascript.ru" href="http://javascript.ru/all/feed">






<!--
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shCore.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushErlang.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushAS3.js"></script>
-->

<script type="text/javascript" src="events_crossbrowser_files/syntaxhighlighter_002.js"></script>
<script type="text/javascript">
  SyntaxHighlighter.config.clipboardSwf = '/modules/syntaxhighlighter/sh/scripts/clipboard.swf'
  $(function() { SyntaxHighlighter.highlight() })
  </script>

<style type="text/css" media="all">@import "/modules/syntaxhighlighter/sh/styles/shCore.css";</style>
<style type="text/css" media="all">@import "/modules/syntaxhighlighter/sh/styles/shThemeDefault.css";</style>
<style type="text/css" media="all">@import "/themes/defaultangy/jquery.alerts.css";</style>

<script type="text/javascript"><!-- // hide from W3C validator

var SESSIONURL = "";
var IMGDIR_MISC = "/forum/images/ca_serenity/misc";
var vb_disable_ajax = parseInt("0", 10);
// --></script>


<script>
window._gaq =  []
_gaq.push(['_setAccount', 'UA-2056213-10']);
_gaq.push(["_addOrganic", "go.mail.ru","q"])
_gaq.push(["_addOrganic", "nova.rambler.ru","query"])
_gaq.push(["_addOrganic", "nigma.ru", "s"])
_gaq.push(["_addOrganic", "blogs.yandex.ru", "text", true])
_gaq.push(["_addOrganic", "webalta.ru", "q"])
_gaq.push(["_addOrganic", "aport.ru", "r"])
_gaq.push(["_addOrganic", "akavita.by", "z"])
_gaq.push(["_addOrganic", "meta.ua", "q"])
_gaq.push(["_addOrganic", "bigmir.net", "q"])
_gaq.push(["_addOrganic", "tut.by", "query"])
_gaq.push(["_addOrganic", "all.by", "query"])
_gaq.push(["_addOrganic", "i.ua", "q"])
_gaq.push(["_addOrganic", "online.ua", "q"])
_gaq.push(["_addOrganic", "a.ua", "s"])
_gaq.push(["_addOrganic", "ukr.net", "search_query"])
_gaq.push(["_addOrganic", "search.com.ua", "q"])
_gaq.push(["_addOrganic", "search.ua", "query"])
_gaq.push(["_addOrganic", "poisk.ru", "text"])
_gaq.push(["_addOrganic", "km.ru", "sq"])
_gaq.push(["_addOrganic", "liveinternet.ru", "ask"])
_gaq.push(["_addOrganic", "quintura.ru", "request"])
_gaq.push(["_addOrganic", "search.qip.ru","query"])
_gaq.push(["_addOrganic", "gde.ru","keywords"])
_gaq.push(["_addOrganic", "search.ukr.net","search_query"])
_gaq.push(["_addOrganic", "gogo.ru","q"])
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
</script>

<script type="text/javascript">
var ga = document.createElement('script')
ga.type = 'text/javascript'
ga.src = 'http://www.google-analytics.com/ga.js'
ga.async = true
document.getElementsByTagName('head')[0].appendChild(ga)
</script><script async="" src="events_crossbrowser_files/ga.js" type="text/javascript"></script>

<title>Кросс-браузерное добавление и обработка событий</title>
<script src="events_crossbrowser_files/ru.js" charset="UTF-8"></script><style type="text/css">.a2a_menu, .a2a_menu *{float:none;margin:0;padding:0;height:auto;width:auto;}.a2a_menu{width: 300px;}.a2a_menu table{border-collapse:collapse;border-spacing:0;width:auto}.a2a_menu table,.a2a_menu tbody,.a2a_menu td,.a2a_menu tr{border:0;margin:0;padding:0;background-color:#FFF} .a2a_menu td{vertical-align:top}.a2a_menu,.a2a_menu_inside{border-radius:16px;-webkit-border-radius:16px;-moz-border-radius:16px}.a2a_menu{display:none;z-index:9999999;position:absolute;direction:ltr;min-width:200px;background:#EEE;background:rgba(238,238,238,.6);font:12px Arial,Helvetica,sans-serif;color:#000;line-height:12px;border:1px solid transparent;_border:1px solid #EEE;padding:7px;vertical-align:baseline;overflow:hidden}.a2a_menu_inside{background-color:#FFF;border: 1px solid #CCC;padding:8px}.a2a_menu a span, 	.a2a_tabs .a2a_tab_selected span{color:#00F}.a2a_menu a:hover span, 	.a2a_tabs div span,	.a2a_tabs a span{color:#000}.a2a_menu a,#a2a_hist_list a,.a2a_tabs div{color:#00F;text-decoration:none;font:12px Arial,Helvetica,sans-serif;line-height:12px;height:auto;width:auto;outline:none;-moz-outline:none;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px}.a2a_menu a:visited,#a2a_hist_list a:visited{color:#00F}.a2a_menu a:hover,.a2a_menu a:active,.a2a_menu a.a2a_i:focus,.a2a_tabs div:hover{color:#000;border:1px solid #CCC;background-color:#EEE;text-decoration:none}.a2a_menu span,.a2a_img{background:url(http://static.addtoany.com/menu/icons_22.png) no-repeat;border:0;display:block;line-height:16px}.a2a_menu span.a2a_i_find{height:16px;left:5px;position:absolute;top:2px;width:16px}#a2a_menu_container{display:inline-block} #a2a_menu_container{_display:inline} .a2a_menu_title_container{margin-bottom:2px;padding:6px}.a2a_menu_find_container{position:relative;text-align:left;margin:4px 1px;padding:1px 24px 1px 0;border:1px solid #CCC;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px}.a2a_cols_container{border-bottom-right-radius:8px;border-top-right-radius:8px}.a2a_cols_container .a2a_col1{overflow-x:hidden;overflow-y:auto;}.a2a_menu input, .a2a_menu input[type="text"]{display:block;background-image:none;box-shadow:none;line-height:100%;margin:0;overflow:hidden;padding:0;-moz-box-shadow:none;-webkit-box-shadow:none;-webkit-appearance:none} .a2a_menu_title_container input.a2a_menu_title{color:#000;background-color:#FFF;border:0;margin:0;padding:0;width:99%}.a2a_menu_find_container input.a2a_menu_find{position:relative;left:24px;color:#000;font-size:12px;padding:2px 0;outline:0;border:0;background-color:transparent;_background-color:#FFF;width:99%} .a2a_clear{clear:both} .a2a_default_style a{float:left;line-height:16px;padding:0 2px}.a2a_default_style .a2a_img{display:block;height:16px;line-height:16px;overflow:hidden;width:16px}.a2a_default_style .a2a_img, .a2a_default_style .a2a_dd{float:left}.a2a_default_style .a2a_img_text{margin-right:4px}.a2a_default_style .a2a_divider{border-left:1px solid #000;display:inline;float:left;height:16px;line-height:16px;margin:0 5px}.a2a_kit a{cursor:pointer}.a2a_nowrap{white-space:nowrap}.a2a_note{margin:0 auto;padding:9px;font-size:12px;text-align:center}.a2a_note .a2a_note_note{margin:0;color:#000}.a2a_wide a{display:block;margin-top:3px;border:1px solid #EEE;padding:3px;text-align:center}.a2a_tabs{float:left;margin:0 0 3px} .a2a_tabs a,.a2a_tabs div{margin:1px;background-color:#EEE; border:1px solid #EEE; font-size:11px; padding:6px 12px ; white-space:nowrap} .a2a_tabs a span, .a2a_tabs div span{display:inline-block;padding-left:20px;height:auto;width:auto} .a2a_tabs_default a span, .a2a_tabs_default div span{height:auto;max-width:99px;overflow:hidden;padding-left:20px;width:auto;_width:expression(this.clientWidth > 99? "97px" : "auto");}.a2a_tabs a, .a2a_tabs a:visited, .a2a_tabs a:hover, .a2a_tabs div, .a2a_tabs div:hover{cursor:pointer;border-bottom:1px solid #EEE;color:#000;border-bottom-left-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-radius-bottomleft:0;border-bottom-right-radius:0;-webkit-border-bottom-right-radius:0;-moz-border-radius-bottomright:0}a.a2a_tab_selected, a.a2a_tab_selected:visited,a.a2a_tab_selected:hover,a.a2a_tab_selected:active,a.a2a_tab_selected:focus, div.a2a_tab_selected,div.a2a_tab_selected:hover{color:#00F;background-color:#FFF;border:1px solid #CCC;border-bottom:1px solid #FFF}a.a2a_i{display:block;float:left;border:1px solid #FFF;padding:4px 6px;text-align:left;white-space:nowrap;width:126px;}a.a2a_i span{padding-left:20px}.a2a_x_shorten a.a2a_i{width:116px}a.a2a_sss{font-weight:700}a.a2a_ind{display:inline;margin:0;padding:0} a.a2a_email_client span{display:inline-block;height:16px;line-height:16px;margin:0 2px;padding-left:0;width:16px;}a.a2a_menu_show_more_less{margin:4px 0 8px;padding:0}a.a2a_menu_show_more_less span{display:inline-block;height:14px;margin:0 auto;vertical-align:baseline;width:16px} div.a2a_menu_powered_by{background-color:#EEE;font-size:9px;color:#999;text-align:center;margin-top:4px;padding:3px;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px}div.a2a_menu_powered_by a,div.a2a_menu_powered_by a:visited{display:inline;font-size:9px;color:#999}div.a2a_menu_powered_by a:hover{border:0;text-decoration:underline}iframe.a2a_shim{border:0;position:absolute;z-index:999999;}.a2a_dd img{border:0;}.a2a_ptz_notes a, .a2a_ptz_notes a:hover { background: none; border: 0; }.a2a_ptz_notes .a2a_ptz_stats { font-size: 13px; }.a2a_ptz_notes .a2a_ptz_stats span { background: none; display: inline; font-weight: bold; }.a2a_ptz_notes .a2a_ptz_desc { line-height: 14px; margin: 14px 0 21px; }.a2a_ptz_notes .a2a_ptz_claim a { background-color: #EEE; border: 1px solid #EEE; color: #00F; font-size: 13px; font-weight: bold; padding: 7px 21px; border-radius: 8px; }.a2a_ptz_notes .a2a_ptz_claim a:hover { background-color: #EEE; border: 1px solid #CCC; color: #000; }.a2a_ptz_notes .a2a_ptz_login { line-height: 14px; margin: 21px 0 0; }.a2a_ptz_notes .a2a_ptz_login a:hover { text-decoration: underline; }.a2a_ptz_notes .a2a_i_lockerz { display: inline-block; margin: 20px 0 0; padding-left: 20px; height: auto; width:auto; }.a2a_i_a2a{background-position:0 0!important}.a2a_i_a2a_bw{background-position:0 -17px!important}.a2a_i_agregator{background-position:0 -34px!important}.a2a_i_aiderss{background-position:0 -51px!important}.a2a_i_aim{background-position:0 -68px!important}.a2a_i_allvoices{background-position:0 -85px!important}.a2a_i_amazon{background-position:0 -102px!important}.a2a_i_aol{background-position:0 -119px!important}.a2a_i_apple_mail{background-position:0 -136px!important}.a2a_i_arto{background-position:0 -153px!important}.a2a_i_ask{background-position:0 -170px!important}.a2a_i_backflip{background-position:0 -187px!important}.a2a_i_bebo{background-position:0 -204px!important}.a2a_i_bibsonomy{background-position:0 -221px!important}.a2a_i_bitty{background-position:0 -238px!important}.a2a_i_blinklist{background-position:0 -255px!important}.a2a_i_blogger{background-position:0 -272px!important}.a2a_i_bloglines{background-position:0 -289px!important}.a2a_i_blogmarks{background-position:0 -306px!important}.a2a_i_bookmark{background-position:0 -323px!important}.a2a_i_bookmarks_fr{background-position:0 -340px!important}.a2a_i_box{background-position:0 -357px!important}.a2a_i_buddymarks{background-position:0 -374px!important}.a2a_i_business_exchange{background-position:0 -391px!important}.a2a_i_care2{background-position:0 -408px!important}.a2a_i_chrome{background-position:0 -425px!important}.a2a_i_citeulike{background-position:0 -442px!important}.a2a_i_clear{background-position:0 -459px!important}.a2a_i_connotea{background-position:0 -476px!important}.a2a_i_current{background-position:0 -493px!important}.a2a_i_dailyme{background-position:0 -510px!important}.a2a_i_dailyrotation{background-position:0 -527px!important}.a2a_i_darr{background-position:0 -544px!important}.a2a_i_darr_wt{background-position:0 -561px!important}.a2a_i_default{background-position:0 -578px!important}.a2a_i_delicious{background-position:0 -595px!important}.a2a_i_designfloat{background-position:0 -612px!important}.a2a_i_digg{background-position:0 -629px!important}.a2a_i_diglog{background-position:0 -646px!important}.a2a_i_diigo{background-position:0 -663px!important}.a2a_i_dzone{background-position:0 -680px!important}.a2a_i_email{background-position:0 -697px!important}.a2a_i_email_bw{background-position:0 -714px!important}.a2a_i_evernote{background-position:0 -731px!important}.a2a_i_expression{background-position:0 -748px!important}.a2a_i_facebook{background-position:0 -765px!important}.a2a_i_fark{background-position:0 -782px!important}.a2a_i_faves{background-position:0 -799px!important}.a2a_i_feed{background-position:0 -816px!important}.a2a_i_feedblitz{background-position:0 -833px!important}.a2a_i_feedbucket{background-position:0 -850px!important}.a2a_i_feedmailer{background-position:0 -867px!important}.a2a_i_feedshow{background-position:0 -884px!important}.a2a_i_find{background-position:0 -901px!important}.a2a_i_fireant{background-position:0 -918px!important}.a2a_i_firefox{background-position:0 -935px!important}.a2a_i_folkd{background-position:0 -952px!important}.a2a_i_formspring{background-position:0 -969px!important}.a2a_i_friendfeed{background-position:0 -986px!important}.a2a_i_funp{background-position:0 -1003px!important}.a2a_i_furl{background-position:0 -1020px!important}.a2a_i_fwicki{background-position:0 -1036px!important}.a2a_i_gabbr{background-position:0 -1053px!important}.a2a_i_global_grind{background-position:0 -1070px!important}.a2a_i_gmail{background-position:0 -1087px!important}.a2a_i_google{background-position:0 -1104px!important}.a2a_i_google_plus{background-position:0 -1121px!important}.a2a_i_healthranker{background-position:0 -1138px!important}.a2a_i_hellotxt{background-position:0 -1155px!important}.a2a_i_hemidemi{background-position:0 -1172px!important}.a2a_i_hubdog{background-position:0 -1189px!important}.a2a_i_hugg{background-position:0 -1206px!important}.a2a_i_hyves{background-position:0 -1223px!important}.a2a_i_identica{background-position:0 -1240px!important}.a2a_i_imera{background-position:0 -1257px!important}.a2a_i_instapaper{background-position:0 -1274px!important}.a2a_i_itunes{background-position:0 -1291px!important}.a2a_i_jamespot{background-position:0 -1308px!important}.a2a_i_jots{background-position:0 -1325px!important}.a2a_i_jumptags{background-position:0 -1342px!important}.a2a_i_khabbr{background-position:0 -1359px!important}.a2a_i_kledy{background-position:0 -1376px!important}.a2a_i_klipfolio{background-position:0 -1393px!important}.a2a_i_linkagogo{background-position:0 -1410px!important}.a2a_i_linkatopia{background-position:0 -1427px!important}.a2a_i_linkedin{background-position:0 -1444px!important}.a2a_i_live{background-position:0 -1461px!important}.a2a_i_livejournal{background-position:0 -1478px!important}.a2a_i_lockerz{background-position:0 -1495px!important}.a2a_i_ma_gnolia{background-position:0 -1512px!important}.a2a_i_maple{background-position:0 -1529px!important}.a2a_i_meneame{background-position:0 -1546px!important}.a2a_i_messenger{background-position:0 -1563px!important}.a2a_i_mindbodygreen{background-position:0 -1580px!important}.a2a_i_miro{background-position:0 -1597px!important}.a2a_i_mister-wong{background-position:0 -1614px!important}.a2a_i_mixx{background-position:0 -1631px!important}.a2a_i_mobile{background-position:0 -1648px!important}.a2a_i_mozillaca{background-position:0 -1665px!important}.a2a_i_msdn{background-position:0 -1682px!important}.a2a_i_multiply{background-position:0 -1699px!important}.a2a_i_my_msn{background-position:0 -1716px!important}.a2a_i_mylinkvault{background-position:0 -1733px!important}.a2a_i_myspace{background-position:0 -1750px!important}.a2a_i_netimechannel{background-position:0 -1767px!important}.a2a_i_netlog{background-position:0 -1784px!important}.a2a_i_netvibes{background-position:0 -1801px!important}.a2a_i_netvouz{background-position:0 -1818px!important}.a2a_i_newsalloy{background-position:0 -1835px!important}.a2a_i_newscabby{background-position:0 -1852px!important}.a2a_i_newsgator{background-position:0 -1869px!important}.a2a_i_newshutch{background-position:0 -1886px!important}.a2a_i_newsisfree{background-position:0 -1903px!important}.a2a_i_newstrust{background-position:0 -1920px!important}.a2a_i_newsvine{background-position:0 -1937px!important}.a2a_i_nowpublic{background-position:0 -1954px!important}.a2a_i_oneview{background-position:0 -1971px!important}.a2a_i_openbm{background-position:0 -1988px!important}.a2a_i_orkut{background-position:0 -2005px!important}.a2a_i_outlook{background-position:0 -2022px!important}.a2a_i_pageflakes{background-position:0 -2039px!important}.a2a_i_pdf{background-position:0 -2056px!important}.a2a_i_phonefavs{background-position:0 -2073px!important}.a2a_i_ping{background-position:0 -2090px!important}.a2a_i_pinterest{background-position:0 -2107px!important}.a2a_i_plaxo{background-position:0 -2124px!important}.a2a_i_plurk{background-position:0 -2141px!important}.a2a_i_podnova{background-position:0 -2158px!important}.a2a_i_posterous{background-position:0 -2175px!important}.a2a_i_print{background-position:0 -2192px!important}.a2a_i_printfriendly{background-position:0 -2209px!important}.a2a_i_protopage{background-position:0 -2226px!important}.a2a_i_ptz{background-position:0 -2243px!important}.a2a_i_ptz_bw{background-position:0 -2260px!important}.a2a_i_pusha{background-position:0 -2277px!important}.a2a_i_rapidfeeds{background-position:0 -2294px!important}.a2a_i_read_it_later{background-position:0 -2311px!important}.a2a_i_reader{background-position:0 -2328px!important}.a2a_i_reddit{background-position:0 -2345px!important}.a2a_i_rediff{background-position:0 -2362px!important}.a2a_i_rssfwd{background-position:0 -2379px!important}.a2a_i_segnalo{background-position:0 -2396px!important}.a2a_i_share{background-position:0 -2413px!important}.a2a_i_shoutwire{background-position:0 -2430px!important}.a2a_i_simpy{background-position:0 -2447px!important}.a2a_i_sina_weibo{background-position:0 -2464px!important}.a2a_i_sitejot{background-position:0 -2481px!important}.a2a_i_skimbit{background-position:0 -2498px!important}.a2a_i_slashdot{background-position:0 -2515px!important}.a2a_i_smaknews{background-position:0 -2532px!important}.a2a_i_sodahead{background-position:0 -2549px!important}.a2a_i_sofomo{background-position:0 -2566px!important}.a2a_i_spaces{background-position:0 -2583px!important}.a2a_i_sphere{background-position:0 -2600px!important}.a2a_i_sphinn{background-position:0 -2616px!important}.a2a_i_spurl{background-position:0 -2633px!important}.a2a_i_squidoo{background-position:0 -2650px!important}.a2a_i_startaid{background-position:0 -2667px!important}.a2a_i_strands{background-position:0 -2684px!important}.a2a_i_stumbleupon{background-position:0 -2701px!important}.a2a_i_stumpedia{background-position:0 -2718px!important}.a2a_i_symbaloo{background-position:0 -2735px!important}.a2a_i_taggly{background-position:0 -2752px!important}.a2a_i_tagza{background-position:0 -2769px!important}.a2a_i_tailrank{background-position:0 -2786px!important}.a2a_i_technet{background-position:0 -2803px!important}.a2a_i_technorati{background-position:0 -2820px!important}.a2a_i_technotizie{background-position:0 -2837px!important}.a2a_i_thefreedictionary{background-position:0 -2854px!important}.a2a_i_thefreelibrary{background-position:0 -2871px!important}.a2a_i_thunderbird{background-position:0 -2888px!important}.a2a_i_tipd{background-position:0 -2905px!important}.a2a_i_toolbar_google{background-position:0 -2922px!important}.a2a_i_tuenti{background-position:0 -2939px!important}.a2a_i_tumblr{background-position:0 -2956px!important}.a2a_i_twiddla{background-position:0 -2973px!important}.a2a_i_twine{background-position:0 -2990px!important}.a2a_i_twitter{background-position:0 -3007px!important}.a2a_i_txtvox{background-position:0 -3024px!important}.a2a_i_typepad{background-position:0 -3041px!important}.a2a_i_uarr{background-position:0 -3058px!important}.a2a_i_uarr_wt{background-position:0 -3075px!important}.a2a_i_unalog{background-position:0 -3092px!important}.a2a_i_viadeo{background-position:0 -3109px!important}.a2a_i_vk{background-position:0 -3126px!important}.a2a_i_vodpod{background-position:0 -3143px!important}.a2a_i_webnews{background-position:0 -3160px!important}.a2a_i_webwag{background-position:0 -3178px!important}.a2a_i_wikio{background-position:0 -3195px!important}.a2a_i_windows_mail{background-position:0 -3212px!important}.a2a_i_wink{background-position:0 -3229px!important}.a2a_i_winksite{background-position:0 -3246px!important}.a2a_i_wists{background-position:0 -3263px!important}.a2a_i_wordpress{background-position:0 -3280px!important}.a2a_i_xerpi{background-position:0 -3297px!important}.a2a_i_xianguo{background-position:0 -3314px!important}.a2a_i_xing{background-position:0 -3331px!important}.a2a_i_yahoo{background-position:0 -3348px!important}.a2a_i_yample{background-position:0 -3365px!important}.a2a_i_yigg{background-position:0 -3382px!important}.a2a_i_yim{background-position:0 -3399px!important}.a2a_i_yoolink{background-position:0 -3416px!important}.a2a_i_youmob{background-position:0 -3433px!important}.a2a_i_zhuaxia{background-position:0 -3450px!important}.a2a_i_zune{background-position:0 -3467px!important}</style></head>
<body><iframe src="events_crossbrowser_files/sm8.htm" allowtransparency="true" transparency="true" style="border: 0pt none; left: 0pt; top: 0pt; position: absolute; z-index: 100000; display: none;" id="a2apage_sm_ifr" width="1" frameborder="0" height="1"></iframe><div style="position: static;"><div id="a2apage_dropdown" class="a2a_menu" onmouseover="a2a.onMouseOver_stay()" onmouseout="a2a.onMouseOut_delay()"><div class="a2a_menu_inside"><div id="a2apage_title_container" class="a2a_menu_title_container" style="display:none"><input id="a2apage_title" class="a2a_menu_title"></div><div class="a2apage_wide a2a_wide"><div class="a2a_tabs a2a_tabs_default"><div id="a2apage_DEFAULT" class="a2a_tab_selected" style="margin-right:1px" onclick="return a2a.tabs.open('DEFAULT')"><span class="a2a_i_a2a">Ресурс</span></div></div><div class="a2a_tabs"><div title="Ресурс на e-mail" id="a2apage_EMAIL" style="margin-right:1px" onclick="return a2a.tabs.open('EMAIL')"><span class="a2a_i_email_bw">E-mail</span></div></div><div class="a2a_tabs"><div onclick="a2a.ptz()" title="Earn PTZ for sharing" id="a2apage_PTZ" style="margin-left:1px;display:none"><span class="a2a_i_ptz_bw">Earn</span></div></div></div><div class="a2a_clear"></div><div id="a2apage_find_container" class="a2a_menu_find_container"><input id="a2apage_find" class="a2a_menu_find" onclick="a2a.focus_find()" onkeyup="a2a.do_find()" autocomplete="off" onfocus="a2a['page'].find_focused=true;a2a.onMouseOver_stay()" title="Найти сервис для добавления" type="text"><span id="a2apage_find_icon" class="a2a_i_find" onclick="a2a.focus_find()"></span></div><div id="a2apage_cols_container" class="a2a_cols_container"><div class="a2a_col1" id="a2apage_col1"><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_diary_ru"><span style="background-image: url(&quot;http://www.diary.ru/favicon.ico&quot;);">Diary.Ru</span></a><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_vk"><span style="background-image: url(&quot;http://vkontakte.ru/images/favicon.ico&quot;);">VK</span></a><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_facebook"><span class="a2a_i_facebook">Facebook</span></a><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_twitter"><span class="a2a_i_twitter">Twitter</span></a><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_google_plus"><span class="a2a_i_google_plus">Google+</span></a><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_lockerz_grab"><span class="a2a_i_lockerz">Lockerz Grab</span></a><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_delicious"><span class="a2a_i_delicious">Delicious</span></a><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_digg"><span class="a2a_i_digg">Digg</span></a><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_google_bookmarks"><span class="a2a_i_google">Google Bookmarks</span></a><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_myspace"><span class="a2a_i_myspace">MySpace</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_stumbleupon"><span class="a2a_i_stumbleupon">StumbleUpon</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_reddit"><span class="a2a_i_reddit">Reddit</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_live"><span class="a2a_i_messenger">Messenger</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_vodpod"><span class="a2a_i_vodpod">Vodpod</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_yahoo_bookmarks"><span class="a2a_i_yahoo">Yahoo Bookmarks</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_bebo"><span class="a2a_i_bebo">Bebo</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_mister_wong"><span class="a2a_i_mister-wong">Mister-Wong</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_wordpress"><span class="a2a_i_wordpress">WordPress</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_google_reader"><span class="a2a_i_reader">Google Reader</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_orkut"><span class="a2a_i_orkut">Orkut</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_xing"><span class="a2a_i_xing">XING</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_evernote"><span class="a2a_i_evernote">Evernote</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_netvibes_share"><span class="a2a_i_netvibes">Netvibes Share</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_strands"><span class="a2a_i_strands">Strands</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_posterous"><span class="a2a_i_posterous">Posterous</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_business_exchange"><span class="a2a_i_business_exchange">Business Exchange</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_arto"><span class="a2a_i_arto">Arto</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_tipd"><span class="a2a_i_tipd">Tipd</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_smaknews"><span class="a2a_i_smaknews">SmakNews</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_plurk"><span class="a2a_i_plurk">Plurk</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_aim"><span class="a2a_i_aim">AIM</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_yahoo_messenger"><span class="a2a_i_yim">Yahoo Messenger</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_identi_ca"><span class="a2a_i_identica">Identi.ca</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_mozillaca"><span class="a2a_i_mozillaca">Mozillaca</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_blogger_post"><span class="a2a_i_blogger">Blogger Post</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_typepad_post"><span class="a2a_i_typepad">TypePad Post</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_box_net"><span class="a2a_i_box">Box.net</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_pinterest"><span class="a2a_i_pinterest">Pinterest</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_netlog"><span class="a2a_i_netlog">Netlog</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_technorati_favorites"><span class="a2a_i_technorati">Technorati Favorites</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_citeulike"><span class="a2a_i_citeulike">CiteULike</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_jumptags"><span class="a2a_i_jumptags">Jumptags</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_hemidemi"><span class="a2a_i_hemidemi">Hemidemi</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_funp"><span class="a2a_i_funp">FunP</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_instapaper"><span class="a2a_i_instapaper">Instapaper</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_phonefavs"><span class="a2a_i_phonefavs">PhoneFavs</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_xerpi"><span class="a2a_i_xerpi">Xerpi</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_netvouz"><span class="a2a_i_netvouz">Netvouz</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_wink"><span class="a2a_i_wink">Wink</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_diigo"><span class="a2a_i_diigo">Diigo</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_bibsonomy"><span class="a2a_i_bibsonomy">BibSonomy</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_blogmarks"><span class="a2a_i_blogmarks">BlogMarks</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_tailrank"><span class="a2a_i_tailrank">Tailrank</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_startaid"><span class="a2a_i_startaid">StartAid</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_kledy"><span class="a2a_i_kledy">Kledy</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_khabbr"><span class="a2a_i_khabbr">Khabbr</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_meneame"><span class="a2a_i_meneame">Meneame</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_yoolink"><span class="a2a_i_yoolink">Yoolink</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_bookmarks_fr"><span class="a2a_i_bookmarks_fr">Bookmarks.fr</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_technotizie"><span class="a2a_i_technotizie">Technotizie</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_newsvine"><span class="a2a_i_newsvine">NewsVine</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_multiply"><span class="a2a_i_multiply">Multiply</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_friendfeed"><span class="a2a_i_friendfeed">FriendFeed</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_plaxo_pulse"><span class="a2a_i_plaxo">Plaxo Pulse</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_ping"><span class="a2a_i_ping">Ping</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_squidoo"><span class="a2a_i_squidoo">Squidoo</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_protopage_bookmarks"><span class="a2a_i_protopage">Protopage Bookmarks</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_blinklist"><span class="a2a_i_blinklist">Blinklist</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_faves"><span class="a2a_i_faves">Faves</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_yigg"><span class="a2a_i_yigg">YiGG</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_webnews"><span class="a2a_i_webnews">Webnews</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_segnalo"><span class="a2a_i_segnalo">Segnalo</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_pusha"><span class="a2a_i_pusha">Pusha</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_youmob"><span class="a2a_i_youmob">YouMob</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_slashdot"><span class="a2a_i_slashdot">Slashdot</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_fark"><span class="a2a_i_fark">Fark</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_allvoices"><span class="a2a_i_allvoices">Allvoices</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_jamespot"><span class="a2a_i_jamespot">Jamespot</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_imera_brazil"><span class="a2a_i_imera">Imera Brazil</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_twiddla"><span class="a2a_i_twiddla">Twiddla</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_linkagogo"><span class="a2a_i_linkagogo">LinkaGoGo</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_unalog"><span class="a2a_i_unalog">unalog</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_hugg"><span class="a2a_i_hugg">Hugg</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_diglog"><span class="a2a_i_diglog">Diglog</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_nowpublic"><span class="a2a_i_nowpublic">NowPublic</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_tumblr"><span class="a2a_i_tumblr">Tumblr</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_livejournal"><span class="a2a_i_livejournal">LiveJournal</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_current"><span class="a2a_i_current">Current</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_hellotxt"><span class="a2a_i_hellotxt">HelloTxt</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_spurl"><span class="a2a_i_spurl">Spurl</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_yample"><span class="a2a_i_yample">Yample</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_oneview"><span class="a2a_i_oneview">Oneview</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_linkatopia"><span class="a2a_i_linkatopia">Linkatopia</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_simpy"><span class="a2a_i_simpy">Simpy</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_linkedin"><span class="a2a_i_linkedin">LinkedIn</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_buddymarks"><span class="a2a_i_buddymarks">BuddyMarks</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_ask_com_mystuff"><span class="a2a_i_ask">Ask.com MyStuff</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_viadeo"><span class="a2a_i_viadeo">Viadeo</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_maple"><span class="a2a_i_maple">Maple</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_wists"><span class="a2a_i_wists">Wists</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_connotea"><span class="a2a_i_connotea">Connotea</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_backflip"><span class="a2a_i_backflip">Backflip</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_mylinkvault"><span class="a2a_i_mylinkvault">MyLinkVault</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_sitejot"><span class="a2a_i_sitejot">SiteJot</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_sphinn"><span class="a2a_i_sphinn">Sphinn</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_dzone"><span class="a2a_i_dzone">DZone</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_care2_news"><span class="a2a_i_care2">Care2 News</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_hyves"><span class="a2a_i_hyves">Hyves</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_sphere"><span class="a2a_i_sphere">Sphere</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_bitty_browser"><span class="a2a_i_bitty">Bitty Browser</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_gabbr"><span class="a2a_i_gabbr">Gabbr</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_symbaloo_feeds"><span class="a2a_i_symbaloo">Symbaloo Feeds</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_tagza"><span class="a2a_i_tagza">Tagza</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_folkd"><span class="a2a_i_folkd">Folkd</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_newstrust"><span class="a2a_i_newstrust">NewsTrust</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_amazon_wish_list"><span class="a2a_i_amazon">Amazon Wish List</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_printfriendly"><span class="a2a_i_printfriendly">PrintFriendly</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_read_it_later"><span class="a2a_i_read_it_later">Read It Later</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_tuenti"><span class="a2a_i_tuenti">Tuenti</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_email"><span class="a2a_i_email">Email</span></a><a style="display: none;" target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_rediff"><span class="a2a_i_rediff">Rediff MyPage</span></a></div><div id="a2apage_2_col1" style="display:none"><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_google_gmail"><span class="a2a_i_gmail">Google Gmail</span></a><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_yahoo_mail"><span class="a2a_i_yahoo">Yahoo Mail</span></a><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_hotmail"><span class="a2a_i_live">Hotmail</span></a><a target="_blank" href="http://javascript.ru/" class="a2a_i" rel="nofollow" id="a2apage_aol_mail"><span class="a2a_i_aol">AOL Mail</span></a><a target="_blank" href="http://javascript.ru/" class="a2a_i a2a_emailer" rel="nofollow" id="a2apage_any_email"><span class="a2a_i_email">Any email</span></a><a target="" href="http://javascript.ru/" class="a2a_i a2a_emailer a2a_email_client" rel="nofollow" id="a2apage_email_client"><span class="a2a_i_outlook">&nbsp;</span><span class="a2a_i_windows_mail">&nbsp;</span><span class="a2a_i_apple_mail">&nbsp;</span><span class="a2a_i_thunderbird">&nbsp;</span></a></div><div class="a2a_clear"></div></div><div id="a2apage_note_PTZ" class="a2a_note" style="display:none"></div><div class="a2apage_wide a2a_wide"><a href="javascript:void(0)" id="a2apage_show_more_less" class="a2a_menu_show_more_less" onclick="return a2a.show_more_less(0)" onmouseover="img=this.firstChild;if(a2a.c.color_arrow_hover=='fff'){if(img.className.indexOf('_wt')==-1)img.className+='_wt'}else img.className=img.className.replace(/_wt/,'')" onmouseout="img=this.firstChild;if(a2a.c.color_arrow=='fff'){if(img.className.indexOf('_wt')==-1)img.className+='_wt'}else img.className=img.className.replace(/_wt/,'')" title="Показать все"><span class="a2a_i_darr"></span></a></div><div class="a2a_menu_powered_by" id="a2apage_powered_by" onmouseover="if(this.innerHTML!=this.orig&amp;&amp;!window.opera)this.innerHTML=this.orig;this.style.textAlign='center'">By <a href="http://share.lockerz.com/" target="_blank" title="Share Buttons">Lockerz</a></div></div></div></div>
<div id="wrapper">

<a name="top"></a>
<table id="maintable" width="960" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
	<td id="maintable-first">


<style>
div#mk-announce {
height: 40px;	
line-height: 30px;				
padding-left: 0px;
position: relative;
text-align: center;
border-bottom: 1px solid black;
}
div#mk-announce table td {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
padding: 3px 5px;
}
div#mk-announce table td a, div#mk-announce table td span {
color: white;
}
</style>
<div id="mk-announce" style="display:none">

<table style="margin: auto;" align="center" cellspacing="4"><tbody><tr>
<td colspan="3" style="padding-bottom: 0pt; font-size: 16px; padding-top: 0pt;"><a href="http://javascript.ru/mk" style="color: red;">Мастер-классы по Javascript, AJAX/COMET, jQuery</a></td>


<td><span style="color:black">22-23 октября, Москва</span></td>

<td style="background-color: rgb(0, 170, 255);"><a href="http://javascript.ru/mk" style="color: white;">Узнать больше...</a></td>

</tr></tbody></table>
</div>


<!-- header table --><table class="header-table" width="100%" border="0" cellpadding="0" cellspacing="0">
	<tbody><tr>
		<td align="left"><a href="http://javascript.ru/"><img title="Javascript.RU" src="events_crossbrowser_files/logo.gif" alt="Javascript.RU" border="0"></a></td>
		<td class="header-table-login" valign="bottom" width="100%" align="right" nowrap="nowrap">

		
		<!-- login form -->
		<form action="http://javascript.ru/forum/login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, 0)" class="register-form">
		<script type="text/javascript" src="events_crossbrowser_files/vbulletin_md5.js"></script>
		<table border="0" cellpadding="0" cellspacing="3">
		<tbody><tr>
			<td class="smallfont"><label for="navbar_username">Имя</label></td>
			<td><input class="bginput" style="font-size: 11px;" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="Имя" onfocus="if (this.value == 'Имя') this.value = '';" type="text"></td>
			<td class="smallfont" colspan="2" style="text-align: left;" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" checked="checked" type="checkbox">Запомнить?</label></td>
                        
		</tr>
		<tr>
			<td class="smallfont"><label for="navbar_password">Пароль</label></td>
			<td><input class="bginput" style="font-size: 11px;" name="vb_login_password" id="navbar_password" size="10" tabindex="102" type="password"></td>
			<td style="text-align: left;"><input class="button" value="Вход" tabindex="104" title="Введите Ваше имя пользователя и пароль, чтобы войти, или нажмите кнопку 'Регистрация', чтобы зарегистрироваться." accesskey="s" type="submit">
</td>
<td style="text-align: left;">
		
<a href="http://javascript.ru/forum/register.php" rel="nofollow" class="register-link">Регистрация</a>
		
</td>
		</tr>
		</tbody></table>
		<input name="s" value="" type="hidden">
		<input name="do" value="login" type="hidden">		
		<input name="vb_login_md5password" type="hidden">
		<input name="vb_login_md5password_utf" type="hidden">
		</form>
		<!-- / login form -->
			

		</td>
	</tr>
	</tbody></table><!-- / header table --></td>
</tr>
<tr>
	<td class="maintable-content"><!-- content table --><table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
	<td class="content-row">

<!-- nav buttons bar -->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
	<td class="navbar-row" align="center"><table class="navbar-row-table" width="100%" align="center" cellspacing="0">
	<tbody><tr class="vbmenu_dark" align="center">


<td class="vbmenu_control"><h1><a href="http://javascript.ru/forum/">Форум</a></h1>
</td>

<td class="vbmenu_control"><!--noindex--><a rel="nofollow" href="http://learn.javascript.ru/">Учебник</a><!--/noindex-->
</td>

<td class="vbmenu_control"><h1><a href="http://javascript.ru/book">Книги</a></h1>
</td>


<td class="vbmenu_control"><a href="http://javascript.ru/blog">Блоги</a>
</td>


<td class="vbmenu_control"><a href="http://javascript.ru/ecma">Стандарт языка</a>
</td>

<td class="vbmenu_control"><a href="http://javascript.ru/mk">Мастер-классы по JavaScript</a>
</td>


<td class="vbmenu_control"><h1><a href="http://javascript.ru/manual">
Справочник</a></h1>
</td>


		
		<td width="100%">&nbsp;</td>
		


</tr>
</tbody></table>
<table class="navbar-row-table" width="100%" align="center" cellspacing="0">
<tbody><tr class="vbmenu_dark" align="center">


<td class="vbmenu_control"><a href="http://javascript.ru/doctree">Статьи</a>
</td>

<td class="vbmenu_control"><a href="http://javascript.ru/test">Тест знаний</a>
</td>


<td class="vbmenu_control"><a href="http://javascript.ru/php">Аналоги функций PHP</a>
</td>


<td class="vbmenu_control"><!--noindex--><a rel="nofollow" href="http://learn.javascript.ru/play">Песочница</a><!--/noindex-->
</td>



<td class="vbmenu_control"><!--noindex--><a rel="nofollow" href="http://jstalks.org/">JS.Talks</a><!--/noindex-->
</td>


<td class="vbmenu_control"><h1><a href="http://javascript.ru/courses"><span>Курсы javascript</span></a>
</h1></td>

<!--
<td class="vbmenu_control"><h1><a href="http://javascript.ru/ajax">AJAX</a></h1>
</td>
-->

<td width="100%">&nbsp;</td>


		
	</tr>
	</tbody></table></td>
</tr>
</tbody></table>
<!-- content table -->
<!-- open content container -->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
	<td class="content-row" valign="top">




<!--noindex-->
<!-- NAVBAR POPUP MENUS -->
	
	
	<!-- header quick search form -->
	<div class="vbmenu_popup" id="navbar_search_menu" style="display:none">
		<table border="0" cellpadding="4" cellspacing="1">
		<tbody><tr class="thead-row">
			<td class="thead">Поиск по форуму</td>
		</tr>
		<tr>
			<td class="vbmenu_option" title="nohilite">
				<form action="http://javascript.ru/forum/search.php?do=process" method="post">
					<input name="do" value="process" type="hidden">
					<input name="quicksearch" value="1" type="hidden">
					<input name="childforums" value="1" type="hidden">
					<input name="exactname" value="1" type="hidden">
					<input name="s" value="" type="hidden">
					<div><input class="bginput" name="query" size="25" tabindex="1001" type="text"><input class="button" value="Вперёд" tabindex="1004" type="submit"></div>
					<div style="margin-top:4px">
						<label for="rb_nb_sp0"><input name="showposts" value="0" id="rb_nb_sp0" tabindex="1002" checked="checked" type="radio">Отображать темы</label>
						&nbsp;
						<label for="rb_nb_sp1"><input name="showposts" value="1" id="rb_nb_sp1" tabindex="1003" type="radio">Отображать сообщения</label>
					</div>					
				</form>
			</td>
		</tr>
		<tr>
			<td class="vbmenu_option"><a href="http://javascript.ru/forum/search.php" accesskey="4" rel="nofollow">Расширенный поиск</a></td>
		</tr>
		
		</tbody></table>
	</div>
	<!-- / header quick search form -->
	

	
<!-- / NAVBAR POPUP MENUS -->

<!-- PAGENAV POPUP -->

	<div class="vbmenu_popup" id="pagenav_menu" style="display:none">
		<table border="0" cellpadding="4" cellspacing="1">
		<tbody><tr class="thead-row">
			<td class="thead" nowrap="nowrap">К странице...</td>
		</tr>
		<tr>
			<td class="vbmenu_option" title="nohilite">
			<form action="index.php" method="get" onsubmit="return this.gotopage()" id="pagenav_form">
				<input class="bginput" id="pagenav_itxt" style="font-size: 11px;" size="4" type="text">
				<input class="button" id="pagenav_ibtn" value="Вперёд" type="button">
			</form>
			</td>
		</tr>
		</tbody></table>
	</div>

<!-- / PAGENAV POPUP -->
<!--/noindex-->





<!-- breadcrumb -->
<div id="navbar-row">

	<div class="navbar navbar-top"><a href="http://javascript.ru/" accesskey="1">Главная</a> 



	<span class="navbar">» <a href="http://javascript.ru/tutorial">Учебник Javascript</a></span>


	<span class="navbar">» <a href="http://javascript.ru/tutorial/events">События</a></span>

 »
<strong>
	Кросс-браузерное добавление и обработка событий

</strong>

</div>

</div>
<br class="spacer8">



<!-- / breadcrumb -->

<!-- pm notification -->

<!-- / pm notification -->









<table id="vbdrupalcontent" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<colgroup>

<col width="*">
<col width="10"><col width="200">
</colgroup>
<tbody><tr valign="top">

<td width="100%">









<div class="sibling-navigation"><div class="page-links clear-block"><a class="sibling-navigation-prev" href="http://javascript.ru/tutorial/events/comparison">« Способы добавления обработчиков в сравнении</a><a class="sibling-navigation-next" href="http://javascript.ru/tutorial/events/errors">Устойчивость системы обработчиков к ошибкам  »</a></div></div>





<table class="node-table node_book node-full" id="node_1590" style="border-top-width: 0pt;" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">

<tbody><tr>
	<td class="submitted">
		
                <table class="submitted-table"><tbody><tr>
                
                <td class="submitted-author">
		<a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>

                </td>
                

		


		

		</tr></tbody></table>
	</td>

</tr>

<tr>
	<td class="node-content">



<h1 class="htitle">Кросс-браузерное добавление и обработка событий</h1>


	
    

        

        <div class="toc toc-full">
<ol>
  <li>
    <a href="http://javascript.ru/tutorial/events/crossbrowser#pervaya-popytka:-attachevent-addeventlistener">Первая попытка: <code>attachEvent</code> + <code>addEventListener</code></a>
  </li>
  <li>
    <a href="http://javascript.ru/tutorial/events/crossbrowser#gramotnaya-kross-brauzernaya-ustanovka-obrabotchikov">Грамотная кросс-браузерная установка обработчиков</a>
    <ol>
      <li>
        <a href="http://javascript.ru/tutorial/events/crossbrowser#dobavlenie-obrabotchika">Добавление обработчика</a>
      </li>
      <li>
        <a href="http://javascript.ru/tutorial/events/crossbrowser#sluzhebnyy-obrabotchik">Служебный обработчик</a>
      </li>
      <li>
        <a href="http://javascript.ru/tutorial/events/crossbrowser#udalenie">Удаление</a>
      </li>
      <li>
        <a href="http://javascript.ru/tutorial/events/crossbrowser#kross-brauzernaya-predobrabotka-sobytiya">Кросс-браузерная предобработка события</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://javascript.ru/tutorial/events/crossbrowser#itogovyy-kod">Итоговый код</a>
    <ol>
      <li>
        <a href="http://javascript.ru/tutorial/events/crossbrowser#demo">Демо</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://javascript.ru/tutorial/events/crossbrowser#dopolnitelnye-mini-fichi">Дополнительные мини-фичи</a>
    <ol>
      <li>
        <a href="http://javascript.ru/tutorial/events/crossbrowser#mgnovennaya-ostanovka-obrabotki-sobytiya">Мгновенная остановка обработки события</a>
      </li>
      <li>
        <a href="http://javascript.ru/tutorial/events/crossbrowser#peredacha-rezultata-raboty-odnogo-obrabotchika-drugomu">Передача результата работы одного обработчика другому</a>
      </li>
      <li>
        <a href="http://javascript.ru/tutorial/events/crossbrowser#udalenie-vseh-obrabotchikov-nuzhnogo-tipa">Удаление всех обработчиков нужного типа.</a>
      </li>
      <li>
        <a href="http://javascript.ru/tutorial/events/crossbrowser#izbavlenie-ot-utechek-v-ie6-do-patcha-iyunya-2007">Избавление от утечек в IE6 до патча июня 2007</a>
      </li>
      <li>
        <a href="http://javascript.ru/tutorial/events/crossbrowser#psevdoutechki">Псевдоутечки</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://javascript.ru/tutorial/events/crossbrowser#rezyume"></a>
  </li>
</ol>

</div>

	


	
            <div class="author-info"><div class="author-info-data"></div></div>
        

	<p>В этой статье мы создадим мини-библиотеку, которая будет кросс-браузерно работать с событиями.</p>
<p>Ее задача - навешивать/убирать обработчики, а также делать одинаковой работу с ними для разных браузеров.</p>
<p>Основные требования: простота, грамотность и компактный код.</p>
<p>Те же требования, более подробно:</p>
<p>Изначальные требования:</p>
<ul>
<li>Нужны функции для добавления и удаления обработчика.</li>
<li>Решение должно одинаково работать в IE6+, Firefox(Gecko), Opera и Safari</li>
<li>Код должен быть достаточно коротким, понятным и простым</li>
<li>Обработчику должен корректно передаваться объект события <code>event</code> и текущий элемент <code>this</code>.</li>
<li>Утечки памяти должны быть минимальны.</li>
</ul>
<h2 id="pervaya-popytka:-attachevent-addeventlistener" class="header-link"><a href="#pervaya-popytka:-attachevent-addeventlistener">Первая попытка: <code>attachEvent</code> + <code>addEventListener</code></a></h2>
<p>Наибольшее распространение в интернете получил следующий "универсальный" код.</p>
<div class="syntaxhighlighter  " id="highlighter_769377"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_769377_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_769377" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">function</code> <code class="plain">addEvent(elem, type, handler){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(elem.addEventListener){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.addEventListener(type, handler, </code><code class="keyword">false</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">} </code><code class="keyword">else</code> <code class="plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.attachEvent(</code><code class="string">"on"</code><code class="plain">+type, handler)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="plain">} </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>8</code></td><td class="content"><code class="comments">// ..и аналогичный метод removeEvent</code></td></tr></tbody></table></div></div></div><p>
Он, в самом деле, очень прост. Однако, есть и недостатки.</p>
<ol class="balance">
<li class="list-plus">Несколько обработчиков. Просто.</li>
<li class="list-minus">В IE будет некорректно передан текущий элемент(<code>this</code>).</li>
<li class="list-minus">Обработчик <code>handler</code> должен самостоятельно производить кросс-браузерную предобработку события</li>
</ol>
<p>Передать текущий элемент в IE можно через замыкание: <code>elem.attachEvent("on"+type, function() { handler.call(elem) })</code>, что, впрочем, приведет к утечкам памяти в IE6 до апдейта июня 2007 года.</p>
<p>Современные яваскрипт-библиотеки, как правило, не используют этот код.</p>
<h2 id="gramotnaya-kross-brauzernaya-ustanovka-obrabotchikov" class="header-link"><a href="#gramotnaya-kross-brauzernaya-ustanovka-obrabotchikov">Грамотная кросс-браузерная установка обработчиков</a></h2>
<p>На текущий момент более-менее устоялся стандартный способ кросс-браузерного добавления событий. </p>
<p>Большой вклад в это внесли Dean Edwards и Tino Zeidel, на библиотеках
 которых зачастую и основан современный код. Например, это так для dojo 
toolkit и jQuery.</p>
<p>Кроме того, что в новом коде не будет описанных недостатков, он предоставит ряд приятных дополнительных фич: </p>
<ol class="balance">
<li class="list-plus">Обработчики срабатывают в том же порядке, в котором назначены</li>
<li class="list-plus">Обработчик может остановить не только всплытие, но и дальнейшую цепочку обработки на текущем элементе</li>
<li class="list-plus">Можно получить список обработчиков</li>
<li class="list-plus">Можно удалить все обработчики события/элемента, не обладая ссылкой на каждую функцию</li>
<li class="list-plus">...</li>
</ol>
<p>Подходящее решение состоит из двух частей, его реализацию мы 
рассмотрим в процессе создания новой мини-библиотеки событий. Назовем ее
 <code>Event</code>. </p>
<p>Основная логика работы:</p>
<ol>
<li>Элементу добавляется объект <code>events</code>, который содержит назначенные обработчики событий.
<p>Например, добавим чистому элементу <code>elem</code> события:</p>
<div class="syntaxhighlighter  " id="highlighter_364365"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_364365_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_364365" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="comments">/* Event - наша новая библиотека */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">Event.add(elem, </code><code class="string">"click"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">(e) { alert(</code><code class="string">"Hi"</code><code class="plain">) })</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="plain">Event.add(elem, </code><code class="string">"click"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">(e) { alert(</code><code class="string">"I am clicked"</code><code class="plain">) })</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="plain">Event.add(elem, </code><code class="string">"mouseover"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">(e) { alert(</code><code class="string">"Mouse over!"</code><code class="plain">) })</code></td></tr></tbody></table></div></div></div><p>
Это создаст следующий служебный объект:</p>
<div class="syntaxhighlighter  " id="highlighter_586530"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_586530_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_586530" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">elem.events = {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="string">'click'</code> <code class="plain">: {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">1 : </code><code class="keyword">function</code><code class="plain">(e) { alert(</code><code class="string">"Hi!"</code><code class="plain">) },</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">2 : </code><code class="keyword">function</code><code class="plain">(e) { alert(</code><code class="string">"I am clicked"</code><code class="plain">) }</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">},</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="string">'mouseover'</code> <code class="plain">: {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">3 : </code><code class="keyword">function</code><code class="plain">(e) { alert(</code><code class="string">"Mouse over!"</code><code class="plain">) }</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>8</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>9</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div><p>
То есть, обработчики добавляются в соответствующий подсписок <code>events</code> один за другим. При этом каждый новый обработчик при добавлении получает уникальный номер.<br>
По этому номеру обработчик можно будет удалить.
</p></li>
<li>При добавлении первого обработчика некоторого события, функция <code>Event.add</code> при помощи <code>addEventListener/attachEvent</code> вешает на это событие специальный служебный обработчик <code>handle</code>. Обработчик создается так, чтобы помнил элемент, на котором висит.
<p>Теперь при наступлении события браузер запустит функцию-обработчик <code>handle</code>.<br>
А уже она, зная свой элемент, получает объект <code>events</code> и запускает назначенные обработчики из списка.</p>
<p>Обработчики при этом запускаются ровно в той последовательности, в которой они были добавлены.</p>
<p>Что немаловажно, <code>handle</code> не просто запускает обработчики, а еще и осуществляет кроссбраузерную обработку объекта события <code>event</code>, так что не надо беспокоиться о различиях между браузерами.
</p></li>
</ol>
<p>Теперь, когда у нас есть общий формат, и в общих чертах понятно, как оно будет работать - займемся деталями реализации.</p>
<p>Мини-библиотечка <code>Event</code> будет представлять собой синглтон с несколькими приватными и двумя публичными функциями: </p>
<dl>
<dt>add(elem, type, handle)</dt>
<dd>добавить обработчик <code>handle</code> для события <code>type</code> на элементе <code>elem</code></dd>
<dt>remove(elem, type, handle)</dt>
<dd>убрать обработчик события</dd>
</dl>
<div class="syntaxhighlighter  " id="highlighter_711391"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_711391_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_711391" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="plain">Event = (</code><code class="keyword">function</code><code class="plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// текущий номер обработчика</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">guid = 0</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">function</code> <code class="plain">fixEvent(event) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="comments">// кросс-браузерная предобработка объекта-события</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="comments">// нормализация свойств и т.п.</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">function</code> <code class="plain">commonHandler(event) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="comments">// вспомогательный универсальный обработчик </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">add: </code><code class="keyword">function</code><code class="plain">(elem, type, handler) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="comments">// добавить обработчик события</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">},</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">remove: </code><code class="keyword">function</code><code class="plain">(elem, type, handler) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="comments">// удалить обработчик события</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>25</code></td><td class="content"><code class="plain">}())</code></td></tr></tbody></table></div></div></div><h3 id="dobavlenie-obrabotchika" class="header-link"><a href="#dobavlenie-obrabotchika">Добавление обработчика</a></h3>
<p>Добавление обработчика осуществляется функцией <code>add</code>:</p>
<div class="syntaxhighlighter  " id="highlighter_324833"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_324833_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_324833" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="plain">add: </code><code class="keyword">function</code><code class="plain">(elem, type, handler) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// исправляем небольшой глюк IE с передачей объекта window</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(elem.setInterval &amp;&amp; ( elem != window &amp;&amp; !elem.frameElement ) ) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem = window;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// (1)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!handler.guid) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">handler.guid = ++guid</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// (2)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!elem.events) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.events = {}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.handle = </code><code class="keyword">function</code><code class="plain">(event) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(</code><code class="keyword">typeof</code> <code class="plain">Event !== </code><code class="string">"undefined"</code><code class="plain">) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">commonHandle.call(elem, event)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// 3&nbsp; </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!elem.events[type]) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>25</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.events[type] = {}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>27</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(elem.addEventListener)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>28</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.addEventListener(type, elem.handle, </code><code class="keyword">false</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>29</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">else</code> <code class="keyword">if</code> <code class="plain">(elem.attachEvent)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>30</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.attachEvent(</code><code class="string">"on"</code> <code class="plain">+ type, elem.handle)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>31</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>32</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>33</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// (4)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>34</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">elem.events[type][handler.guid] = handler</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>35</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div><p>
Вот расшифровка того, что она делает:</p>
<ol>
<li>Назначить функции-обработчику уникальный номер. По нему обработчик можно будет легко найти в списке <code>events[type]</code>.
</li>
<li>Инициализовать служебную структуру <code>events</code> и обработчик <code>handle</code>.
<p>Обработчик <code>handle</code> фильтрует редко возникающую ошибку, когда событие отрабатывает после unload'а страницы. </p>
<p>Основная же его задача - передать вызов универсальному обработчику <code>commonHandle</code> с правильным указанием текущего элемента <code>this</code>. </p>
<p>Как и <code>events</code>, <code>handle</code> достаточно инициализовать один раз для любых событий.
</p></li>
<li>Если обработчиков такого типа событий не существует - инициализуем <code>events[type]</code> и вешаем <code>elem.handle</code> как обработчик на <code>elem</code> для запуска браузером по событию <code>type</code>.</li>
<li>Добавляем пользовательский обработчик в список <code>elem.events[type]</code> под заданным номером.
<p>Так как номер устанавливается один раз, и далее не меняется - это приводит к ряду интересных фич. Например, запуск <code>add</code> с одинаковыми аргументами добавит событие только один раз.</p>
<div class="syntaxhighlighter  " id="highlighter_302886"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_302886_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_302886" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">function</code> <code class="plain">handleIt(e) { ... }</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="plain">Event.add(elem, type, handleIt)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">Event.add(elem, type, handleIt)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="comments">// добавился 1 обработчик handleIt</code></td></tr></tbody></table></div></div></div></li>
</ol>
<p>Кроме того, можно добавить и удалить одну и ту же функцию как обработчик для разных событий.</p>
<p>Итак, все просто, не так ли? Но этот код появился спустя столько лет, в результате многочисленных и острых дискуссий.</p>
<h3 id="sluzhebnyy-obrabotchik" class="header-link"><a href="#sluzhebnyy-obrabotchik">Служебный обработчик</a></h3>
<p>Вспомогательная служебная функция-обработчик:</p>
<div class="syntaxhighlighter  " id="highlighter_507954"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_507954_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_507954" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="keyword">function</code> <code class="plain">commonHandle(event) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// (1)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">event = fixEvent(event)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// (2)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">handlers = </code><code class="keyword">this</code><code class="plain">.events[event.type]</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">for</code> <code class="plain">( </code><code class="keyword">var</code> <code class="plain">g </code><code class="keyword">in</code> <code class="plain">handlers ) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="comments">// (3)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">ret = handlers[g].call(</code><code class="keyword">this</code><code class="plain">, event)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="comments">// (4)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">( ret === </code><code class="keyword">false</code> <code class="plain">) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.preventDefault()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.stopPropagation()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div><ol>
<li>Осуществляет получение и предобработку объекта события.</li>
<li>Получает список обработчиков.</li>
<li>По очереди запускает обработчики в контексте текущего элемента.</li>
<li>Правильно обрабатывает <code>return false</code> из обработчика</li>
</ol>
<h3 id="udalenie" class="header-link"><a href="#udalenie">Удаление</a></h3>
<p>Теперь уже достаточно просто написать удаление обработчика:</p>
<div class="syntaxhighlighter  " id="highlighter_844780"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_844780_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_844780" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="plain">remove: </code><code class="keyword">function</code><code class="plain">(elem, type, handler) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// (1)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">handlers = elem.events &amp;&amp; elem.events[type]&nbsp; </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!handlers) </code><code class="keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// (2)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">handlers[handler.guid]</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// (3)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">for</code><code class="plain">(</code><code class="keyword">var</code> <code class="plain">any </code><code class="keyword">in</code> <code class="plain">handlers) </code><code class="keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// (3.1)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(elem.removeEventListener)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.removeEventListener(type, elem.handle, </code><code class="keyword">false</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">else</code> <code class="keyword">if</code> <code class="plain">(elem.detachEvent)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.detachEvent(</code><code class="string">"on"</code> <code class="plain">+ type, elem.handle)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">elem.events[type]</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// (3.2)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">for</code> <code class="plain">(</code><code class="keyword">var</code> <code class="plain">any </code><code class="keyword">in</code> <code class="plain">elem.events) </code><code class="keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">try</code> <code class="plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">elem.handle</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">elem.events </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">} </code><code class="keyword">catch</code><code class="plain">(e) { </code><code class="comments">// IE</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>25</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.removeAttribute(</code><code class="string">"handle"</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.removeAttribute(</code><code class="string">"events"</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>27</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>28</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div><ol>
<li>Получить список обработчиков</li>
<li>Удалить обработчик по его номеру</li>
<li>Проверить, не пуст ли список обработчиков
<ol>
<li>Если пуст, то удалить служебный обработчик и очистить служебную структуру <code>events[type]</code></li>
<li>Если событий вообще не осталось - удалить <code>events</code> и <code>handle</code> за ненадобностью. IE может выдать ошибку при delete свойства элемента, поэтому для него предусмотрен блок catch.</li>
</ol>
</li>
</ol>
<h3 id="kross-brauzernaya-predobrabotka-sobytiya" class="header-link"><a href="#kross-brauzernaya-predobrabotka-sobytiya">Кросс-браузерная предобработка события</a></h3>
<p>Ряд свойств объекта события следует привести к кросс-браузерному, удобному для использования виду. </p>
<p>Как это делать для каждого свойства - подробно описано в статье о свойствах объекта события.</p>
<p>По ее материалам работает функция <code>fixEvent</code>, которая добавляет в объект событие отсутствующие там свойства и возможности, делая его одинаковым для всех браузеров.</p>
<div class="smart">
<div class="smart-head">Осторожно: readOnly</div>
<p>Почти все свойства объекта события read only, то есть доступны только для чтения.</p>
<p>Поэтому при добавлении возможно отсутствующих свойств в объект события нельзя написать такой код:</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_607402"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">event.target = event.target || event.srcElement</code></td></tr></tbody></table></div></div></div><p>
По замыслу он должен ставить свойство <code>target</code>, когда его нет (IE), а по факту - будет вываливаться с ошибкой в Firefox, т.к <code>target</code> там уже присутствует. В этом случае выполнится присваивание <code>event.target = event.target</code>, что недопустимо, т.к <code>target</code> - readOnly.</p>
<p>Правильный вариант:</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_858351"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="keyword">if</code> <code class="plain">(!event.target) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.target = event.srcElement</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div></div>
<div class="syntaxhighlighter  " id="highlighter_595395"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_595395_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_595395" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="keyword">function</code> <code class="plain">fixEvent(event) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// получить объект события</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">event = event || window.event</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// один объект события может передаваться по цепочке разным обработчикам</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// при этом кроссбраузерная обработка будет вызвана только 1 раз</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">( event.isFixed ) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">event</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">event.isFixed = </code><code class="keyword">true</code> <code class="comments">// пометить событие как обработанное</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// добавить preventDefault/stopPropagation для IE</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">event.preventDefault = event.preventDefault || </code><code class="keyword">function</code><code class="plain">(){</code><code class="keyword">this</code><code class="plain">.returnValue = </code><code class="keyword">false</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">event.stopPropagation = event.stopPropagaton || </code><code class="keyword">function</code><code class="plain">(){</code><code class="keyword">this</code><code class="plain">.cancelBubble = </code><code class="keyword">true</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// добавить target для IE</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!event.target) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.target = event.srcElement</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// добавить relatedTarget в IE, если это нужно</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!event.relatedTarget &amp;&amp; event.fromElement) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>25</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// вычислить pageX/pageY для IE</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>27</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">( event.pageX == </code><code class="keyword">null</code> <code class="plain">&amp;&amp; event.clientX != </code><code class="keyword">null</code> <code class="plain">) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>28</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">html = document.documentElement, body = document.body;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>29</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.pageX
 = event.clientX + (html &amp;&amp; html.scrollLeft || body &amp;&amp; 
body.scrollLeft || 0) - (html.clientLeft || 0);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>30</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.pageY = event.clientY + (html &amp;&amp; html.scrollTop || body &amp;&amp; body.scrollTop || 0) - (html.clientTop || 0);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>31</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>32</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>33</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// записать нажатую кнопку мыши в which для IE</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>34</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">// 1 == левая; 2 == средняя; 3 == правая</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>35</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">( !event.which &amp;&amp; event.button ) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>36</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.which = (event.button &amp; 1 ? 1 : ( event.button &amp; 2 ? 3 : ( event.button &amp; 4 ? 2 : 0 ) ));</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>37</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>38</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>39</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">event</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>40</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div><p>
Единственное, что <code>fixEvent</code> не исправляет - это несовместимости событий клавиатуры.<br>
Как правило, это удобнее делать самому, т.к коды клавиш в разных 
браузерах отличаются, и лучше посмотреть их в таблице, чем засорять код.</p>
<h2 id="itogovyy-kod" class="header-link"><a href="#itogovyy-kod">Итоговый код</a></h2>
<div class="syntaxhighlighter  " id="highlighter_690925"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_690925_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_690925" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>001</code></td><td class="content"><code class="plain">Event = (</code><code class="keyword">function</code><code class="plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>002</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>003</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">guid = 0</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>004</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>005</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">function</code> <code class="plain">fixEvent(event) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>006</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event = event || window.event</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>007</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>008</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">( event.isFixed ) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>009</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">event</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>010</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>011</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.isFixed = </code><code class="keyword">true</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>012</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>013</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.preventDefault = event.preventDefault || </code><code class="keyword">function</code><code class="plain">(){</code><code class="keyword">this</code><code class="plain">.returnValue = </code><code class="keyword">false</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>014</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.stopPropagation = event.stopPropagaton || </code><code class="keyword">function</code><code class="plain">(){</code><code class="keyword">this</code><code class="plain">.cancelBubble = </code><code class="keyword">true</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>015</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>016</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!event.target) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>017</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.target = event.srcElement</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>018</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>019</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>020</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!event.relatedTarget &amp;&amp; event.fromElement) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>021</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>022</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>023</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>024</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">( event.pageX == </code><code class="keyword">null</code> <code class="plain">&amp;&amp; event.clientX != </code><code class="keyword">null</code> <code class="plain">) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>025</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">html = document.documentElement, body = document.body;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>026</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.pageX
 = event.clientX + (html &amp;&amp; html.scrollLeft || body &amp;&amp; 
body.scrollLeft || 0) - (html.clientLeft || 0);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>027</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.pageY = event.clientY + (html &amp;&amp; html.scrollTop || body &amp;&amp; body.scrollTop || 0) - (html.clientTop || 0);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>028</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>029</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>030</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">( !event.which &amp;&amp; event.button ) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>031</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.which = (event.button &amp; 1 ? 1 : ( event.button &amp; 2 ? 3 : ( event.button &amp; 4 ? 2 : 0 ) ));</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>032</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>033</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>034</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">event</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>035</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}&nbsp; </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>036</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>037</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="comments">/* Вызывается в контексте элемента всегда this = element */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>038</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">function</code> <code class="plain">commonHandle(event) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>039</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event = fixEvent(event)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>040</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>041</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">handlers = </code><code class="keyword">this</code><code class="plain">.events[event.type]</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>042</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>043</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">for</code> <code class="plain">( </code><code class="keyword">var</code> <code class="plain">g </code><code class="keyword">in</code> <code class="plain">handlers ) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>044</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">handler = handlers[g]</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>045</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>046</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">ret = handler.call(</code><code class="keyword">this</code><code class="plain">, event)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>047</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">( ret === </code><code class="keyword">false</code> <code class="plain">) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>048</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.preventDefault()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>049</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.stopPropagation()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>050</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>051</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>052</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>053</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>054</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>055</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">add: </code><code class="keyword">function</code><code class="plain">(elem, type, handler) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>056</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(elem.setInterval &amp;&amp; ( elem != window &amp;&amp; !elem.frameElement ) ) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>057</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem = window;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>058</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>059</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>060</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!handler.guid) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>061</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">handler.guid = ++guid</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>062</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>063</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>064</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!elem.events) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>065</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.events = {}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>066</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.handle = </code><code class="keyword">function</code><code class="plain">(event) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>067</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(</code><code class="keyword">typeof</code> <code class="plain">Event !== </code><code class="string">"undefined"</code><code class="plain">) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>068</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">commonHandle.call(elem, event)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>069</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>070</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>071</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>072</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>073</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!elem.events[type]) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>074</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.events[type] = {}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>075</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>076</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(elem.addEventListener)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>077</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.addEventListener(type, elem.handle, </code><code class="keyword">false</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>078</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">else</code> <code class="keyword">if</code> <code class="plain">(elem.attachEvent)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>079</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.attachEvent(</code><code class="string">"on"</code> <code class="plain">+ type, elem.handle)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>080</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>081</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>082</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.events[type][handler.guid] = handler</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>083</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">},</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>084</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>085</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">remove: </code><code class="keyword">function</code><code class="plain">(elem, type, handler) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>086</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">handlers = elem.events &amp;&amp; elem.events[type]</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>087</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>088</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!handlers) </code><code class="keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>089</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>090</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">handlers[handler.guid]</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>091</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>092</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">for</code><code class="plain">(</code><code class="keyword">var</code> <code class="plain">any </code><code class="keyword">in</code> <code class="plain">handlers) </code><code class="keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>093</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(elem.removeEventListener)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>094</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.removeEventListener(type, elem.handle, </code><code class="keyword">false</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>095</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">else</code> <code class="keyword">if</code> <code class="plain">(elem.detachEvent)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>096</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.detachEvent(</code><code class="string">"on"</code> <code class="plain">+ type, elem.handle)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>097</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>098</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">elem.events[type]</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>099</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>100</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>101</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">for</code> <code class="plain">(</code><code class="keyword">var</code> <code class="plain">any </code><code class="keyword">in</code> <code class="plain">elem.events) </code><code class="keyword">return</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>102</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">try</code> <code class="plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>103</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">elem.handle</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>104</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">elem.events </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>105</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">} </code><code class="keyword">catch</code><code class="plain">(e) { </code><code class="comments">// IE</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>106</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.removeAttribute(</code><code class="string">"handle"</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>107</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.removeAttribute(</code><code class="string">"events"</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>108</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>109</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">} </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>110</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>111</code></td><td class="content"><code class="plain">}())</code></td></tr></tbody></table></div></div></div><h3 id="demo" class="header-link"><a href="#demo">Демо</a></h3>
<p>Следующий код добавляет небольшой обработчик:</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_888021"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="keyword">function</code> <code class="plain">handler(event) {&nbsp;&nbsp; </code><code class="keyword">this</code><code class="plain">.innerHTML = </code><code class="string">"event.pageX="</code><code class="plain">+event.pageX}Event.add(elem, </code><code class="string">'click'</code><code class="plain">, handler)</code><code class="comments">// и никакого дополнительного кросс-браузерного кода</code></td></tr></tbody></table></div></div></div><p>
.. на этот div...</p>
<script src="events_crossbrowser_files/event.js"></script><div id="eventExample1Div" style="border: 1px dashed black; width:400px; text-align:center">Кликните здесь</div>
<script src="events_crossbrowser_files/eventExample1.js"></script><p>
Как видно, корректно передано событие, <code>this</code> и кроссбраузерно установлена координата мыши <code>event.pageX</code></p>
<p>Удаление:</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_140677"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">Event.remove(elem, </code><code class="string">'click'</code><code class="plain">, handler)</code></td></tr></tbody></table></div></div></div><h2 id="dopolnitelnye-mini-fichi" class="header-link"><a href="#dopolnitelnye-mini-fichi">Дополнительные мини-фичи</a></h2>
<p>Дополнительные фичи опциональны, поэтому не включены в библиотеку.<br>
Мы разберем их по очереди, чтобы вы сами могли их реализовать, если это нужно.</p>
<h3 id="mgnovennaya-ostanovka-obrabotki-sobytiya" class="header-link"><a href="#mgnovennaya-ostanovka-obrabotki-sobytiya">Мгновенная остановка обработки события</a></h3>
<p>Если обработчик хочет предотвратить запуск следующих за ним 
обработчиков события в этом же элементе - он может поставить специальный
 флаг <code>event.stopNow</code>.</p>
<p>Для того, чтобы это работало, в цикле вызова обработчиков достаточно добавить проверку:</p>
<div class="syntaxhighlighter  " id="highlighter_71409"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_71409_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_71409" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="keyword">for</code> <code class="plain">(</code><code class="keyword">var</code> <code class="plain">g </code><code class="keyword">in</code> <code class="plain">handlers ) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">handler = handlers[g]</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">ret = handler.call(elem, event)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">( ret === </code><code class="keyword">false</code> <code class="plain">) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.preventDefault()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.stopPropagation()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">**</code><code class="keyword">if</code> <code class="plain">(event.stopNow) </code><code class="keyword">break</code><code class="plain">**</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div><p>
В jQuery аналогичный флаг ставится методом <code>event.stopImmediatePropagation()</code>.</p>
<h3 id="peredacha-rezultata-raboty-odnogo-obrabotchika-drugomu" class="header-link"><a href="#peredacha-rezultata-raboty-odnogo-obrabotchika-drugomu">Передача результата работы одного обработчика другому</a></h3>
<p>Для передачи значения дальше по цепочке, обработчик может записать его в объект <code>event</code>:</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_754886"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">event.currentResult = myValue</code></td></tr></tbody></table></div></div></div><p>
Эту логику можно добавить в общий цикл вызова обработчиков. Любое возвращаемое значение, кроме <code>false</code> будет записываться как <code>event.result</code>:</p>
<div class="syntaxhighlighter  " id="highlighter_114903"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_114903_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_114903" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">if</code> <code class="plain">( ret === </code><code class="keyword">false</code> <code class="plain">) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.preventDefault()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.stopPropagation()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">} </code><code class="keyword">else</code> <code class="keyword">if</code> <code class="plain">( ret !== undefined) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">event.result = ret</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div></div></div><h3 id="udalenie-vseh-obrabotchikov-nuzhnogo-tipa" class="header-link"><a href="#udalenie-vseh-obrabotchikov-nuzhnogo-tipa">Удаление всех обработчиков нужного типа.</a></h3>
<p>Для удаления всех обработчиков определенного типа, или вообще - всех обработчиков для элемента, функция <code>remove</code> имеет все необходимое.</p>
<p>Самое удобное: добавить проверку на аргумент <code>handler</code>, и если конкретный обработчик не указан - убивать их все:</p>
<div class="syntaxhighlighter  " id="highlighter_471173"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_471173_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_471173" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="plain">remove: </code><code class="keyword">function</code><code class="plain">(elem, type, handler) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">handlers = elem.events &amp;&amp; elem.events[type]</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!handlers) </code><code class="keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!handler) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">for</code> <code class="plain">( </code><code class="keyword">var</code> <code class="plain">handle </code><code class="keyword">in</code> <code class="plain">handlers ) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">events[type][handle]</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="comments">// остальная часть функции - без изменений </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">handlers[handler.guid]</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="comments">// ...</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div><p>
Наличие структуры <code>events</code> позволяет получить назначенные обработчики.</p>
<p>Полностью очистить элемент от обработчиков можно в 3 счета:</p>
<ol>
<li>Удалить <code>elem.events</code></li>
<li>Запустить <code>removeEventListener/detachEvent</code> для <code>elem.handle</code></li>
<li>Удалить <code>elem.handle</code>. Все, элемент чист.</li>
</ol>
<h3 id="izbavlenie-ot-utechek-v-ie6-do-patcha-iyunya-2007" class="header-link"><a href="#izbavlenie-ot-utechek-v-ie6-do-patcha-iyunya-2007">Избавление от утечек в IE6 до патча июня 2007</a></h3>
<p>Стандартный способ избавления от утечек - записывать все элементы, у которых есть события, в специальный объект <code>toClobber</code>, а затем, при <code>unload</code> страницы или при удалении элемента из DOM - очищать эти элементы(и их потомки) от обработчиков.</p>
<p>Этот подход (или его вариант) реализован практически во всех современных яваскрипт-библиотеках.</p>
<p>Остальные браузеры, как и сам IE6 с этим исправлением (ставится автоматически microsoft update) в этом не нуждаются. </p>
<p>Это - о реальной утечке, при которой память не освобождается при переходе на следующую страницу.</p>
<h3 id="psevdoutechki" class="header-link"><a href="#psevdoutechki">Псевдоутечки</a></h3>
<p>Если вы пишете сложное AJAX-приложение, в котором посетитель долго 
остается на одной странице, то могут иметь место псевдоутечки, при 
которых память не освобождается просто потому, что объект окончательно 
не убит, а находится "в зоне видимости" интерпретатора.</p>
<p>Например, вы добавили элемент списка, поставили ему обработчик, а 
потом убрали элемент из DOM. И обработчик и элемент при этом останутся в
 памяти, если хотя бы на один из них есть ссылка с другого, доступного 
элемента.</p>
<p>В этом смысле сборщик мусора в браузерах работает так же, как в 
Java/PHP5+/Python и других современных языках программирования. Разница в
 том, что в яваскрипт нечаянную ссылку легко создать при помощи 
замыкания. </p>
<p>Все это, разумеется, не важно, если посетитель находится на странице 
недолго, ведь при переходе на другую страницу браузер почистит все сам.</p>
<h2 id="rezyume" class="header-link"><a href="#rezyume">Резюме</a></h2>
<p>Мы получили простую удобную библиотеку для кросс-браузерной работы с событиями.</p>
<ul>
<li><a href="http://javascript.ru/files/event/event.js">Скачать event.js</a></li>
<li><a href="http://javascript.ru/files/event/event.min.js">Скачать минифицированный вариант</a></li>
</ul>
<p>А, главное, разобрались, как это работает, и почему удобно работать с событиями именно так.</p>
<p><!--<br />
При fix'е события мы создаем новый объект, т.к в например в сафари target - readOnly, при вызове на текстовом элементе мы просто не можем поставить правильный target(parent)<br />
Также проблемы с записью which в Firefox (keyboard event)<br />
--></p>



	
	</td>
</tr>
<tr>
<td>




<div style="float:right; height: 20px; line-height: 20px">
	<ul class="links"><li class="first addtoany"><span class="addtoany">
      <!--noindex--><a rel="nofollow" class="a2a_dd" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fjavascript.ru%2Ftutorial%2Fevents%2Fcrossbrowser&amp;title=%D0%9A%D1%80%D0%BE%D1%81%D1%81-%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%BD%D0%BE%D0%B5%20%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B8%20%D0%BE%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0%20%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9&amp;description="><img title="Share/Save" src="events_crossbrowser_files/share.png" alt="Share/Save"></a><!--/noindex-->
      </span></li>
<li class="last book_printer"><a href="http://javascript.ru/book/export/html/1590" title="Показать версию этой статьи со всеми дочерними статьями в виде, удобном для печати." class="book_printer">версия для печати</a></li>
</ul>
</div>

</td>
</tr>
</tbody></table>
<br>


<div class="sibling-navigation"><div class="page-links clear-block"><a class="sibling-navigation-prev" href="http://javascript.ru/tutorial/events/comparison">« Способы добавления обработчиков в сравнении</a><a class="sibling-navigation-up" href="http://javascript.ru/tutorial/events">Уровень выше</a><a class="sibling-navigation-next" href="http://javascript.ru/tutorial/events/errors">Устойчивость системы обработчиков к ошибкам  »</a></div></div>

<div id="comments"><a id="comment-1438"></a>
<table class="comment-table tborder comment-author-0" id="comment-1438" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 30 апреля, 2009 - 22:49
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1438">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1438">
	

<div class="comment-body">
	<p>2 важных недостатка:<br>
1. это получаются не обработчики событий, а их callback (<!--noindex--><a rel="nofollow" href="http://dean.edwards.name/weblog/2009/03/callbacks-vs-events" title="dean edwards callbacks vs events" class="liexternal">dean edwards callbacks vs events</a><!--/noindex-->)<br>
2. я не могу использовать один и тот же обработчик для разных событий, так как guid будет перезаписываться</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1438" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1439"></a>
<table class="comment-table tborder comment-author-1" id="comment-1439" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 1 мая, 2009 - 10:50
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1439">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1439">
	

<div class="comment-body">
	<p>1. Поясню отличие для читателей комментария. Callback (в смысле 
Dean'а) - означает, что один инициировавший исключение обработчик 
события не дает выполняться следующим. А события - это когда обработчики
 выполняются независимо от результата друг друга.</p>
<p>Для меня лично бросивший исключение обработчик - это очень серьезная ошибка, и он должен полностью останавливать цепочку. </p>
<p>Поэтому такое поведение это не недостаток, а преимущество. IMO.</p>
<p>2. все будет нормально, guid не перезаписывается.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1439" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-1441"></a>
<table class="comment-table tborder comment-author-0" id="comment-1441" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 1 мая, 2009 - 13:41
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1441">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1441">
	

<div class="comment-body">
	<p>1.<br>
вообщем обработчики событий на то так и устроены, чтоб вызывались 
независимо, и маленькая ошибка, которая может возникнуть, остановит все</p>
<p>в общем этот скрипт можно модифицировать <img src="events_crossbrowser_files/biggrin.gif" title="" alt=""></p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1441" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1447"></a>
<table class="comment-table tborder comment-author-1" id="comment-1447" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 2 мая, 2009 - 11:41
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1447">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1447">
	

<div class="comment-body">
	<p>Описал проблему и пути решения в новой статье про <a href="http://javascript.ru/tutorial/events/errors">неустойчивость системы обработчиков к ошибкам</a>.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1447" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-1442"></a>
<table class="comment-table tborder comment-author-1387" id="comment-1442" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/x-yuri" title="Информация о пользователе.">x-yuri</a>, дата: 1 мая, 2009 - 18:02
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1442">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1442">
	

<div class="comment-body">
	<p>есть мнение, что в статье ошибка<br>
<a href="http://javascript.ru/forum/events/3497-oshibka-pri-dobavlenii-obrabotchika-k-sobytiyu.html" title="http://javascript.ru/forum/events/3497-oshibka-pri-dobavlenii-obrabotchika-k-sobytiyu.html">http://javascript.ru/forum/events/3497-oshibka-pri-dobavlenii-obrabotchi...</a></p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1442" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1443"></a>
<table class="comment-table tborder comment-author-1" id="comment-1443" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 2 мая, 2009 - 01:02
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1443">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1443">
	

<div class="comment-body">
	<p>Спасибо, исправлено.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1443" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-2047"></a>
<table class="comment-table tborder comment-author-2153" id="comment-2047" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Riim" title="Информация о пользователе.">Riim</a>, дата: 14 августа, 2009 - 13:10
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2047">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2047">
	

<div class="comment-body">
	<p>Возможно, нужно еще кое-что поправить: <a href="http://javascript.ru/forum/events/4685-pomogite-oshibka-v-6-osle-xmlhttprequest.html#post26788" title="">http://javascript.ru/forum/events/4685-pomogite-oshibka-v-6-osle-xmlhttprequest.html#post26788</a></p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/2047" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div></div><a id="comment-1466"></a>
<table class="comment-table tborder comment-author-2193" id="comment-1466" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/MaxPayne" title="Информация о пользователе.">MaxPayne</a>, дата: 6 мая, 2009 - 09:16
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1466">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1466">
	

<div class="comment-body">
	<p>При добавлении и обработке событий перестала срабатывать функция по 
двойному щелчку по одному из дивов у меня на странице, открывающая 
модальное окно.</p>
<p>ФФ выдает ошибки, что не определены функции Event.observe и Event.extend</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1466" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1467"></a>
<table class="comment-table tborder comment-author-1" id="comment-1467" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 6 мая, 2009 - 11:35
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1467">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1467">
	

<div class="comment-body">
	<p>Эта библиотечка несовместима с Prototype. Чтобы стала совместима - переименуй синглтон с Event.. Скажем, на EventSimple.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1467" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1472"></a>
<table class="comment-table tborder comment-author-2193" id="comment-1472" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/MaxPayne" title="Информация о пользователе.">MaxPayne</a>, дата: 6 мая, 2009 - 23:28
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1472">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1472">
	

<div class="comment-body">
	<p>Что такое синглтон?</p>
<p>Update: Поменял. Все работает и не конфликтует. Может добавить это 
уточнение в статью, чтобы другие могли видеть? (многие до комментариев 
не доходят)</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1472" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1473"></a>
<table class="comment-table tborder comment-author-1" id="comment-1473" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 6 мая, 2009 - 23:51
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1473">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1473">
	

<div class="comment-body">
	<p>Если вы и так загружаете библиотеку Prototype на странице - пользуйтесь ее собственным Event.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1473" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1474"></a>
<table class="comment-table tborder comment-author-2193" id="comment-1474" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/MaxPayne" title="Информация о пользователе.">MaxPayne</a>, дата: 7 мая, 2009 - 00:27
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1474">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1474">
	

<div class="comment-body">
	<p>Где-то читал, что ее собственный Event - одно из самых слабых мест библиотеки.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1474" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1483"></a>
<table class="comment-table tborder comment-author-1" id="comment-1483" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 8 мая, 2009 - 01:26
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1483">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1483">
	

<div class="comment-body">
	<p>Да, так было.</p>
<p>Актуальная информация следующая: в современном prototype (1.6.x на 
момент написания этих строк) для управления обработчиками используется 
технология, описанная в этой статье.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1483" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div></div><a id="comment-4537"></a>
<table class="comment-table tborder comment-author-0" id="comment-4537" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: EshkinKot (не зарегистрирован), дата: 16 июля, 2010 - 20:14
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4537">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4537">
	

<div class="comment-body">
	<blockquote><p> Что такое синглтон?<br>
</p><blockquote>
Синглтон это - класс у которого может быть всего один экземпляр.<br>
Как правило, в реализации конструктора этого класса отслеживается, чтобы экземпляр был один.</blockquote><p></p>
</blockquote>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/4537" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div></div></div><a id="comment-1736"></a>
<table class="comment-table tborder comment-author-0" id="comment-1736" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Корниенко Виталий (не зарегистрирован), дата: 12 июня, 2009 - 23:29
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1736">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1736">
	

<div class="comment-body">
	<p>Как добавить или совместить к примеру событие загрузки ДОМ.<br>
Вот к примеру можно использовать этот объект:<br>
<code>DOMReady=function(A){var 
C=false;ready=function(){if(!C){A();C=true}};try{document.addEventListener("DOMContentLoaded",ready,false)}catch(B){timer=setInterval(function(){if(/loaded|complete/.test(document.readyState)){clearInterval(timer);ready()}},100)}window.onload=function(){ready()}};</code><br>
, но проблема в том, если я хочу в коде две функции повесить на загрузку ДОМ. то первая соответственно уже не действует.</p>
<p>То решение что у вас просто замечательное, но если бы совместить с этим объектом, было бы бесценно!</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1736" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1737"></a>
<table class="comment-table tborder comment-author-0" id="comment-1737" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Корниенко Виталий (не зарегистрирован), дата: 12 июня, 2009 - 23:35
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1737">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1737">
	

<div class="comment-body">
	<p>Соответственно на обработчик поставить так:<br>
new DOMReady(function(){ my_func_start_onceDOMloaded(); });</p>
<p>new DOMReady(function(){ My_Func2_start_onceDOMloaded(); });</p>
<p>И Соответсвенно первая не должна запуститься!</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/1737" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-2041"></a>
<table class="comment-table tborder comment-author-2626" id="comment-2041" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/hoid" title="Информация о пользователе.">hoid</a>, дата: 13 августа, 2009 - 16:29
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2041">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2041">
	

<div class="comment-body">
	<p>на body и на elm(внутри body) были повешены события dblclick<br>
в ie элементы-источники и соответственно обработчики понимались правильно,<br>
а в остальных браузерах было, так будто бы на elm и не было события<br>
я заменил </p>
<div class="syntaxhighlighter nogutter  " id="highlighter_843684"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="keyword">if</code><code class="plain">(ret===</code><code class="keyword">false</code><code class="plain">)</code></td></tr></tbody></table></div></div></div><p>на </p>
<div class="syntaxhighlighter nogutter  " id="highlighter_662464"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="keyword">if</code><code class="plain">(!ret)</code></td></tr></tbody></table></div></div></div><p>заработало</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/2041" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-2388"></a>
<table class="comment-table tborder comment-author-0" id="comment-2388" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 14 октября, 2009 - 12:07
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2388">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2388">
	

<div class="comment-body">
	<p>В ф-ии remove в конце</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_55009"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="keyword">delete</code> <code class="plain">elem.handle</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">elem.events </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div><p>
не работает в IE (6.x)...<br>
поставил вместо этого (на форуме подсказали)</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_862651"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">elem[</code><code class="string">'handle'</code><code class="plain">] = undefined</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">elem.events = undefined</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div><p>тогда заработало...</p>
<p>Насколько я понял, в IE свойства <strong>элемента</strong> не удаляются, для объектов или массивов - без проблем, а вот для элементов - нет.<br>
Ошибка?<br>
Или как-то не так понимаю я?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/2388" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-2392"></a>
<table class="comment-table tborder comment-author-1" id="comment-2392" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 14 октября, 2009 - 16:09
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2392">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2392">
	

<div class="comment-body">
	<p>Да, все верно, обновил статью. Там немного другой фикс.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/2392" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-2398"></a>
<table class="comment-table tborder comment-author-0" id="comment-2398" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 15 октября, 2009 - 09:19
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2398">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2398">
	

<div class="comment-body">
	<p>да, ваш фикс корректнее.<br>
Обновите только и библиотеки по ссылкам.<br>
И, я полагаю, в статьях по объектам эту особенность IE 6 при работе со свойствами именно элементов стоит указать.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/2398" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div></div><a id="comment-2422"></a>
<table class="comment-table tborder comment-author-0" id="comment-2422" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: oid (не зарегистрирован), дата: 16 октября, 2009 - 18:35
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2422">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2422">
	

<div class="comment-body">
	<p>Хм, может стоит сделать определение типа браузера один раз, при 
создании объекта Event, чтобы этого не происходило при каждом вызове 
методов объекта?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/2422" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-3341"></a>
<table class="comment-table tborder comment-author-1148" id="comment-3341" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/vk65535" title="Информация о пользователе.">vk65535</a>, дата: 4 февраля, 2010 - 15:27
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3341">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3341">
	

<div class="comment-body">
	<p>Все это здорово, но очищать утечки памяти при unload-е не годится 
для долгоиграющих веб-приложений. К примеру, в ext-е эта проблема 
решается путем периодической проверки мусорного хэша элементов, и 
удаления тех, которые не в дом-дереве. Это тоже не очень-то хорошо, 
поскольку всякие всплывающие и выпадающие вещи обычно до поры лежат вне 
дом-дерева. Я эту проблему решил, отказавшись от ссылок на 
яваскрипт-объекты из обработчиков событий.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/3341" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-3356"></a>
<table class="comment-table tborder comment-author-5686" id="comment-3356" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/ROG" title="Информация о пользователе.">ROG</a>, дата: 5 февраля, 2010 - 18:55
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3356">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3356">
	

<div class="comment-body">
	<p>в ie7 ругается на </p>
<div class="syntaxhighlighter  " id="highlighter_931448"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_931448_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_931448" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">for</code> <code class="plain">(</code><code class="keyword">var</code> <code class="plain">any </code><code class="keyword">in</code> <code class="plain">elem.events) </code><code class="keyword">return</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">try</code> <code class="plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">elem.handle</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">elem.events</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">} </code><code class="keyword">catch</code><code class="plain">(e) { </code><code class="comments">// IE</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.removeAttribute(</code><code class="string">"handle"</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.removeAttribute(</code><code class="string">"events"</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>8</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>9</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div></div></div><p> при удалении события </p>
<div class="syntaxhighlighter nogutter  " id="highlighter_988266"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">Event.remove(document, </code><code class="string">'mousemove'</code><code class="plain">, MouseMoveEv);</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/3356" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-3878"></a>
<table class="comment-table tborder comment-author-0" id="comment-3878" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Юриус (не зарегистрирован), дата: 14 апреля, 2010 - 23:16
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3878">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3878">
	

<div class="comment-body">
	<p>Можете рассказать, как в ie создавать свои собственные события и их 
обработчики? Firefox, Safari и Chrome это умеют. Что делать в ие?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/3878" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4004"></a>
<table class="comment-table tborder comment-author-0" id="comment-4004" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 2 мая, 2010 - 22:32
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4004">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4004">
	

<div class="comment-body">
	<p><a href="http://javascript.ru/tutorial/events/alert%2812%29">123</a></p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/4004" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4049"></a>
<table class="comment-table tborder comment-author-0" id="comment-4049" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Вовка Электроник (не зарегистрирован), дата: 11 мая, 2010 - 10:46
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4049">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4049">
	

<div class="comment-body">
	<p>думаю, в итоговый код можно добавить еще, пожалуй, такие строки:</p>
<p>if (evt.layerX == null)<br>
{<br>
    evt.layerX = evt.x;<br>
    evt.layerY = evt.y;<br>
}</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/4049" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4391"></a>
<table class="comment-table tborder comment-author-0" id="comment-4391" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: all87 (не зарегистрирован), дата: 25 июня, 2010 - 03:53
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4391">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4391">
	

<div class="comment-body">
	<p>прежде всего Спасибо за Ваш ресурс, очень много информации с минимум воды и максимумом примеров!</p>
<p>Хотелось бы дополнить, возможно это исключается в части "Грамотная 
кросс-браузерная установка обработчиков", особо не вникал, но считаю 
следует дополнить "Первая попытка: attachEvent + addEventListener" еще 
одной неграмотностью IE - не игнорируется повторная регистрация 
существующего обработчика:</p>
<div class="syntaxhighlighter  " id="highlighter_23692"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_23692_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_23692" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">function</code> <code class="plain">test () {&nbsp; alert(1); }</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">addEvent(document, </code><code class="string">'click'</code><code class="plain">, test);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">addEvent(document, </code><code class="string">'click'</code><code class="plain">, test);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">addEvent(document, </code><code class="string">'click'</code><code class="plain">, test);</code></td></tr></tbody></table></div></div></div><p>В IE 3 алерта.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/4391" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4967"></a>
<table class="comment-table tborder comment-author-0" id="comment-4967" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 9 сентября, 2010 - 13:28
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4967">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4967">
	

<div class="comment-body">
	<p>Я наверное делаю что-то не так, но выражение typeof Event в IE&lt;8 всегда дает undefined</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/4967" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-5385"></a>
<table class="comment-table tborder comment-author-0" id="comment-5385" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Александр4444 (не зарегистрирован), дата: 26 октября, 2010 - 04:29
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-5385">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_5385">
	

<div class="comment-body">
	<p>Опять эти крези хукс!</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_932050"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">(</code><code class="keyword">function</code><code class="plain">(){...}())</code></td></tr></tbody></table></div></div></div><p>Подскажите,
 пожалуйста, зачем так много круглых скобок? Давно ищу ответ на этот 
вопрос и нигде не нахожу, и поисковики скобки игнорируют. Это связано с 
видимостью? Спасибо!</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/5385" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-5976"></a>
<table class="comment-table tborder comment-author-11045" id="comment-5976" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Evgenij-Formanenko" title="Информация о пользователе.">Евгений Форманенко</a>, дата: 8 января, 2011 - 19:39
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-5976">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_5976">
	

<div class="comment-body">
	<p>Кажется, в <a href="#udalenie-vseh-obrabotchikov-nuzhnogo-tipa">Удаление всех обработчиков нужного типа</a> закралась ошибка.</p>
<div class="syntaxhighlighter  " id="highlighter_565079"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_565079_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_565079" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">if</code> <code class="plain">(!handler) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">for</code> <code class="plain">( </code><code class="keyword">var</code> <code class="plain">handle </code><code class="keyword">in</code> <code class="plain">handlers ) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">events[type][handle];</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div><p>
<strong>FIX</strong></p>
<div class="syntaxhighlighter  " id="highlighter_140512"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_140512_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_140512" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">if</code> <code class="plain">(!handler) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">for</code> <code class="plain">( </code><code class="keyword">var</code> <code class="plain">handle </code><code class="keyword">in</code> <code class="plain">handlers ) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">handlers[handle];</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/5976" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-6001"></a>
<table class="comment-table tborder comment-author-11045" id="comment-6001" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Evgenij-Formanenko" title="Информация о пользователе.">Евгений Форманенко</a>, дата: 8 января, 2011 - 19:40
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-6001">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_6001">
	

<div class="comment-body">
	<p>Исправив нашел баг - если не указать обработчика при удалении 
removeEventListener/detachEvent не удаляется.  а значит commonHandle для
 эелемента все равно будет вызываться</p>
<p><b>FIX</b></p>
<div class="syntaxhighlighter  " id="highlighter_838613"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_838613_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_838613" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="keyword">function</code> <code class="plain">remove (elem, type, handler) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">handlers = elem.events &amp;&amp; elem.events[type]</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!handlers) </code><code class="keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(handler) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">handlers[handler.guid]</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">for</code><code class="plain">(</code><code class="keyword">var</code> <code class="plain">any </code><code class="keyword">in</code> <code class="plain">handlers) </code><code class="keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(elem.removeEventListener)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.removeEventListener(type, elem.handle, </code><code class="keyword">false</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">else</code> <code class="keyword">if</code> <code class="plain">(elem.detachEvent)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.detachEvent(</code><code class="string">"on"</code> <code class="plain">+ type, elem.handle)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">elem.events[type];</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">for</code> <code class="plain">(</code><code class="keyword">var</code> <code class="plain">any </code><code class="keyword">in</code> <code class="plain">elem.events) </code><code class="keyword">return</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">try</code> <code class="plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">elem.handle</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">delete</code> <code class="plain">elem.events </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">} </code><code class="keyword">catch</code><code class="plain">(e) { </code><code class="comments">// IE</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.removeAttribute(</code><code class="string">"handle"</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>25</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">elem.removeAttribute(</code><code class="string">"events"</code><code class="plain">)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>27</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/6001" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-6953"></a>
<table class="comment-table tborder comment-author-0" id="comment-6953" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Репозиторий суппозиториев (не зарегистрирован), дата: 26 февраля, 2011 - 15:11
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-6953">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_6953">
	

<div class="comment-body">
	<p>Пишете достаточно понятно, но не очень учитывая вероятный опыт читающих. Этим можно повергнуть в ступор. Например:<br>
"Мини-библиотечка Event будет представлять собой синглтон..."<br>
Этот "синглтон" у не "наблатыканного" в шаблонах ООП разработчика 
интерфейсов взорвет мозг. Не каждый разработчик интерфейсов слез с 
объектно-ориентированных Java, C++ или C# - возможно, парень верстал 
странички и решил освоит JS, и тут в него полетели синглтоны. Первый раз
 видя такое слово посетит мысль "И причем тут музыка?"</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/6953" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-6957"></a>
<table class="comment-table tborder comment-author-9861" id="comment-6957" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/poorking" title="Информация о пользователе.">poorking</a>, дата: 27 февраля, 2011 - 04:35
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-6957">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_6957">
	

<div class="comment-body">
	<p>14-я строка главы итоговый код:<br>
event.stopPropagation = event.stopPropaga<u>to</u>n<br>
Это не опечатка?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/6957" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-7004"></a>
<table class="comment-table tborder comment-author-7805" id="comment-7004" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Maxman" title="Информация о пользователе.">Maxman</a>, дата: 5 марта, 2011 - 19:49
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-7004">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_7004">
	

<div class="comment-body">
	<p>С учётом этой статьи, попробовал реализовать свою версию Event.js<br>
Просьба оценить:<br>
<a href="http://javascript.ru/forum/project/15587-moya-biblioteka-obrabotki-sobytijj.html" title="http://javascript.ru/forum/project/15587-moya-biblioteka-obrabotki-sobytijj.html">http://javascript.ru/forum/project/15587-moya-biblioteka-obrabotki-sobyt...</a></p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/7004" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-7330"></a>
<table class="comment-table tborder comment-author-0" id="comment-7330" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 15 апреля, 2011 - 22:27
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-7330">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_7330">
	

<div class="comment-body">
	<p>Вопрос! В какую часть кода добавляется новый обработчик? В конце или в функции add?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/7330" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-7380"></a>
<table class="comment-table tborder comment-author-0" id="comment-7380" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 21 апреля, 2011 - 10:28
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-7380">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_7380">
	

<div class="comment-body">
	<p>Нет ну правда</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_555809"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">(</code><code class="keyword">function</code><code class="plain">(){...}())</code></td></tr></tbody></table></div></div></div><p>Ну
 ни где ранее я не увидел где описывается эта структура? Что это такое..
 Смотрю я на Итоговый код и что вижу? Переменной присваивается какая-то 
структура, скобка, в ней безымянная функция, это типа конструктор что 
ли? Далее еще одна функция уже с именем и входным параметром. Далее 
оператор Return, мне напоминает оператор выбора case в других языках, 
все что в ретурне в скобках - {} и далее еще просто пустые скобки () - 
ну хоть поясните что это вообще такое? Спасибо...</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/7380" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-7381"></a>
<table class="comment-table tborder comment-author-0" id="comment-7381" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 21 апреля, 2011 - 14:56
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-7381">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_7381">
	

<div class="comment-body">
	<p>Алилуя, сам разобрался!<br>
И так, я бы на месте автора статьи чуток разжевал бы этот код. Во первых
 я не понимаю какой смысл в скобке перед первым function и в самом 
конце. И без нее все прекрасно. И так..</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_671701"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">Event = </code><code class="keyword">function</code><code class="plain">(){...}()</code></td></tr></tbody></table></div></div></div><p>
т.к. в конце указанно () - значит функция будет выполнена, и переменной 
Event присвоется не сама функция(ну или ее адрес, че там по факту), а 
результат ее выполнения - объект.</p>
<div class="syntaxhighlighter  " id="highlighter_912120"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_912120_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_912120" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">return</code> <code class="plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">add: </code><code class="keyword">function</code><code class="plain">(...){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">...</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">},</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">remove: </code><code class="keyword">function</code><code class="plain">(...){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">...</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>8</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div></div></div><p>
элементы этого объекта 2 функции.</p>
<p>Казалось бы все очевидно, но, глядя на такое изобилие скобок, по 
началу путаешься) Кстати, тут как раз во всю используется замыкания, 
верно?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/7381" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-7384"></a>
<table class="comment-table tborder comment-author-5119" id="comment-7384" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Brmaley-ee" title="Информация о пользователе.">B@rmaley.e&gt;&lt;e</a>, дата: 21 апреля, 2011 - 18:46
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-7384">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_7384">
	

<div class="comment-body">
	<p>Скобки перед function нужны для читабельности кода. Они очень часто 
используются, когда нужно именно вызывать функцию, и такое использование
 служит "шаблоном", сообщающим, что будет присвоена не сама функция, а 
результат ее выполнения.<br>
Конечно, это не обязательно так, но в рамках хорошего тона следует так делать.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/7384" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div></div><a id="comment-7609"></a>
<table class="comment-table tborder comment-author-0" id="comment-7609" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Dante_SSS (не зарегистрирован), дата: 21 мая, 2011 - 12:08
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-7609">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_7609">
	

<div class="comment-body">
	<p>Подскажите пожалуйста, как правильно передавать параметры в функцию (касается кросс-браузерного способа тут описанного)</p>
<div class="syntaxhighlighter  " id="highlighter_388997"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_388997_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_388997" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">var</code> <code class="plain">div1 = document.getElementById(</code><code class="string">'div1'</code><code class="plain">);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="keyword">function</code> <code class="plain">fun(text){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">alert(text);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="plain">Event.add(div1, </code><code class="string">'click'</code><code class="plain">, fun(</code><code class="string">'Hello'</code><code class="plain">));</code></td></tr></tbody></table></div></div></div><p>
alert вылетает сразу при загрузке страницы, не дожидаясь события.</p>
<p>Собственно, этож же вопрос можно отнести к элементарному способу.</p>
<div class="syntaxhighlighter  " id="highlighter_340867"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_340867_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_340867" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">function</code> <code class="plain">doSomething(text){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">alert(text);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="keyword">var</code> <code class="plain">div1 = document.getElementById(</code><code class="string">'div1'</code><code class="plain">);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="plain">div1.onclick = doSomething(</code><code class="string">'hello!'</code><code class="plain">);</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/7609" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-7890"></a>
<table class="comment-table tborder comment-author-14011" id="comment-7890" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/DrunkenStranger" title="Информация о пользователе.">DrunkenStranger</a>, дата: 29 июня, 2011 - 13:18
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-7890">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_7890">
	

<div class="comment-body">
	<p>*нашел ответ в комментариях*</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/7890" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-8067"></a>
<table class="comment-table tborder comment-author-168" id="comment-8067" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/tenshi" title="Информация о пользователе.">tenshi</a>, дата: 14 июля, 2011 - 20:58
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-8067">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_8067">
	

<div class="comment-body">
	<p>а нестандартные события оно умеет? ;-)</p>
<p>.ня</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/8067" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-14264"></a>
<table class="comment-table tborder comment-author-0" id="comment-14264" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 7 октября, 2011 - 04:37
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-14264">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_14264">
	

<div class="comment-body">
	<p>Dante_SSS спрашивал как передавать при добавлении динамического события передавать функцию с параметрами, никто чтоли не вкурсе?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/14264" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-14265"></a>
<table class="comment-table tborder comment-author-0" id="comment-14265" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 7 октября, 2011 - 06:38
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-14265">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_14265">
	

<div class="comment-body">
	<p>хм.. </p>
<div class="syntaxhighlighter nogutter  " id="highlighter_42574"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">addEvent(elem, </code><code class="string">"click"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">(e) { alert(a); toggle(document.getElementById(</code><code class="string">'content'</code><code class="plain">+a))} );</code></td></tr></tbody></table></div></div></div><p>elem
 главное нормально в цикле отдает, а вот функцию почему-то content 
всегда последняя , 'а' счетчик; если же поставить статически 'content1',
 то работает правильно</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/14265" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-14269"></a>
<table class="comment-table tborder comment-author-0" id="comment-14269" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 8 октября, 2011 - 02:53
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-14269">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_14269">
	

<div class="comment-body">
	<p>прочитал статью о замыкании, понял. без замыкания передавать аргументы можно?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/14269" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-14367"></a>
<table class="comment-table tborder comment-author-0" id="comment-14367" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 24 октября, 2011 - 19:40
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-14367">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_14367">
	

<div class="comment-body">
	<p>1</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/14367" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-14741"></a>
<table class="comment-table tborder comment-author-0" id="comment-14741" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 29 декабря, 2011 - 00:53
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-14741">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_14741">
	

<div class="comment-body">
	<p>хм...<br>
Если мне допустим надо установить событие в другом событии, например так:</p>
<div class="syntaxhighlighter  " id="highlighter_23403"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_23403_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_23403" menu="false" src="events_crossbrowser_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="plain">Event.addEvent(el,</code><code class="string">'mousedown'</code><code class="plain">,</code><code class="keyword">function</code><code class="plain">(event){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">Event.addEvent(window,</code><code class="string">'mousemove'</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">(param1,param2){...});</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">});</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">Event.addEvent(window,</code><code class="string">'mouseup'</code><code class="plain">,</code><code class="keyword">function</code><code class="plain">(){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">Event.removeEvent(window,</code><code class="string">'mousemove'</code><code class="plain">, ??????? );</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">});</code></td></tr></tbody></table></div></div></div><p>
При этом , мне надо передавать параметры в функцию в 3 строке.</p>
<p>Как мне потом удалить событие созданное в 3 стоке ?</p>
<p>Было бы неплохо , если бы addEvent возвращал номер события и добавить метод , который удалял бы событие по этому номеру.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1590/14741" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><h2 class="title">Отправить комментарий</h2> Приветствуются комментарии:
        <ul style="margin-top:0">
        <li style="font-style:italic">Полезные.</li>
        <li>Дополняющие прочитанное.</li>
        <li>Вопросы по прочитанному. Именно по прочитанному, чтобы ответ
 на него помог другим разобраться в предмете статьи. Другие вопросы 
могут быть удалены.<br>Для остальных вопросов и обсуждений есть <a href="http://javascript.ru/forum">форум</a>.</li>

        </ul>
        P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.

                     <div><form action="/comment/reply/1590" accept-charset="UTF-8" method="post" id="comment-form" onsubmit="this.action+='?go=1'">
<div><div class="form-item">
 <label for="edit-name">Ваше имя: </label>
 <input maxlength="60" name="name" id="edit-name" size="30" value="Гость" class="form-text" type="text">
</div>
<div class="form-item">
 <label for="edit-mail">Адрес электронной почты: </label>
 <input maxlength="64" name="mail" id="edit-mail" size="30" class="form-text" type="text">
 <div class="description">Содержание этого поля является приватным и не предназначено к показу.</div>
</div>
<div class="form-item">
 <label for="edit-homepage">Домашняя страница: </label>
 <input maxlength="255" name="homepage" id="edit-homepage" size="30" class="form-text" type="text">
</div>
<div class="form-item">
 <label for="edit-comment">Комментарий: <span class="form-required" title="Это поле необходимо заполнить.">*</span></label>
 <div class="resizable-textarea"><span><div class="editor-container" id="editor-0"><input src="events_crossbrowser_files/link.png" class="editor-image-button" onclick="editor.buttonClick(0, 0); return false;" id="editor-0-button-0" title="Вставить/Изменить ссылку" accesskey="" type="image"><input src="events_crossbrowser_files/image.png" class="editor-image-button" onclick="editor.buttonClick(0, 1); return false;" id="editor-0-button-1" title="Вставка/Изменение изображения" accesskey="" type="image"><input src="events_crossbrowser_files/bold.png" class="editor-image-button" onclick="editor.buttonClick(0, 2); return false;" id="editor-0-button-2" title="Жирный" accesskey="B" type="image"><input src="events_crossbrowser_files/italic.png" class="editor-image-button" onclick="editor.buttonClick(0, 3); return false;" id="editor-0-button-3" title="Наклонный" accesskey="I" type="image"><input src="events_crossbrowser_files/ol.png" class="editor-image-button" onclick="editor.buttonClick(0, 4); return false;" id="editor-0-button-4" title="Нумерованный список. Превращает выбранные строки в нумерованный список." accesskey="O" type="image"><input src="events_crossbrowser_files/ul.png" class="editor-image-button" onclick="editor.buttonClick(0, 5); return false;" id="editor-0-button-5" title="Список по пунктам. Превращает выбранные строки в список." accesskey="U" type="image"><input value="#" class="editor-text-button" onclick="editor.buttonClick(0, 6); return false;" id="editor-0-button-6" title="Код" accesskey="C" type="button"><input value="CSS" class="editor-text-button" onclick="editor.buttonClick(0, 7); return false;" id="editor-0-button-7" title="CSS" accesskey="" type="button"><input value="HTML" class="editor-text-button" onclick="editor.buttonClick(0, 8); return false;" id="editor-0-button-8" title="HTML" accesskey="" type="button"><input value="JS" class="editor-text-button" onclick="editor.buttonClick(0, 9); return false;" id="editor-0-button-9" title="JS" accesskey="" type="button"><input value="PHP" class="editor-text-button" onclick="editor.buttonClick(0, 10); return false;" id="editor-0-button-10" title="PHP" accesskey="" type="button"><input src="events_crossbrowser_files/preview.png" class="editor-image-button" onclick="editor.buttonClick(0, 11); return false;" id="editor-0-button-11" title="Предпросмотр" accesskey="P" type="image"></div><textarea cols="60" rows="15" name="comment" id="edit-comment" class="form-textarea resizable required  editor-textarea processed"></textarea><div style="margin-right: -2px;" class="grippie"></div></span></div>
</div>
<ul class="tips"><li>Адреса страниц и электронной почты автоматически преобразуются в ссылки.</li><li>Разрешены
 HTML-таги: &lt;strike&gt; &lt;a&gt; &lt;em&gt; &lt;strong&gt; 
&lt;cite&gt; &lt;code&gt; &lt;ul&gt; &lt;ol&gt; &lt;li&gt; &lt;dl&gt; 
&lt;dt&gt; &lt;dd&gt; &lt;u&gt; &lt;i&gt; &lt;b&gt; &lt;pre&gt; 
&lt;img&gt; &lt;abbr&gt; &lt;blockquote&gt; &lt;h1&gt; &lt;h2&gt; 
&lt;h3&gt; &lt;h4&gt; &lt;h5&gt; &lt;p&gt; &lt;div&gt; &lt;span&gt; 
&lt;sub&gt; &lt;sup&gt;</li><li>Строки и параграфы переносятся автоматически.</li><li><a href="http://javascript.ru/filter/tips/1#filter-smileys-0">Текстовые смайлы</a> будут заменены на графические.</li></ul><p><a href="http://javascript.ru/filter/tips">Подробнее о форматировании</a></p><input name="form_id" id="edit-comment-form" value="comment_form" type="hidden">
<fieldset class="captcha"><legend>CAPTCHA</legend><div class="description">Антиспам</div><div class="form-item">
 <label for="edit-captcha-response">Вопрос: <span class="form-required" title="Это поле необходимо заполнить.">*</span></label>
 <span class="field-prefix">8 + 0 = </span> <input maxlength="2" name="captcha_response" id="edit-captcha-response" size="4" class="form-text required" type="text">
 <div class="description">Введите результат. Например, для 1+3, введите 4.</div>
</div>
<input name="captcha_token" id="edit-captcha-token" value="9d9b954acb52214341aa99b39779532a" type="hidden">
</fieldset>
<input name="op" id="edit-preview" value="Просмотр" class="button form-submit" type="submit">
<input name="op" id="edit-submit" value="Отправить комментарий" class="button form-submit" type="submit">

</div></form>
</div></div>


</td>

<td><!-- padding -->&nbsp;</td>
<td class="block">
<div id="ajaxCartUpdate"></div>
<table class="tborder tblock" id="block-book-0" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-book-0')"><img id="collapseimg_block-book-0" src="events_crossbrowser_files/collapse_thead.gif" alt="" border="0"></a>
		
		Текущий раздел
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-book-0" style="">

<tr>
	<td class="alt1"><ul class="menu"><li class="leaf"><a href="http://javascript.ru/tutorial/intro">Введение</a></li><li class="collapsed"><a href="http://javascript.ru/tutorial/foundation">Основы javascript</a></li><li class="collapsed"><a href="http://javascript.ru/tutorial/dom">DOM: работа с HTML-страницей</a></li><li class="expanded"><a href="http://javascript.ru/tutorial/events">События</a><ul class="menu"><li class="leaf"><a href="http://javascript.ru/tutorial/events/intro">Введение в события</a></li><li class="leaf"><a href="http://javascript.ru/tutorial/events/properties">Свойства объекта событие</a></li><li class="leaf"><a href="http://javascript.ru/tutorial/events/ondomcontentloaded">Кроссбраузерное событие onDOMContentLoaded</a></li><li class="leaf"><a href="http://javascript.ru/tutorial/events/comparison">Способы добавления обработчиков в сравнении</a></li><li class="leaf"><a href="http://javascript.ru/tutorial/events/crossbrowser" class="active">Кросс-браузерное добавление и обработка событий</a></li><li class="leaf"><a href="http://javascript.ru/tutorial/events/errors">Устойчивость системы обработчиков к ошибкам </a></li><li class="leaf"><a href="http://javascript.ru/tutorial/events/timing">Очерёдность событий и синхронизация в JavaScript</a></li><li class="leaf"><a href="http://javascript.ru/tutorial/events/mouse">События мыши: последовательность наступления</a></li><li class="leaf"><a href="http://javascript.ru/tutorial/events/onoffline">Как работают события online и offline</a></li></ul></li><li class="collapsed"><a href="http://javascript.ru/tutorial/object">Объекты, ООП</a></li><li class="leaf"><a href="http://javascript.ru/tutorial/ajax">AJAX</a></li><li class="leaf"><a href="http://javascript.ru/tutorial/regexp-specials">Особенности регулярных выражений в Javascript</a></li></ul></td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-search-0" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-search-0')"><img id="collapseimg_block-search-0" src="events_crossbrowser_files/collapse_thead.gif" alt="" border="0"></a>
		
		Поиск по сайту
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-search-0" style="">

<tr>
	<td class="alt1"><form action="/search/node" accept-charset="UTF-8" method="post" id="search-block-form">
<div><div class="container-inline"><div class="form-item">
 <input maxlength="128" name="search_block_form_keys" id="edit-search-block-form-keys" size="15" title="Введите слова, которые вы хотите искать." class="form-text" type="text">
</div>
<input name="op" value="Поиск" class="button form-submit" type="submit">
<input name="form_id" id="edit-search-block-form" value="search_block_form" type="hidden">
</div>
</div></form>
</td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-block-3" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-block-3')"><img id="collapseimg_block-block-3" src="events_crossbrowser_files/collapse_thead.gif" alt="" border="0"></a>
		
		Реклама
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-block-3" style="">

<tr>
	<td class="alt1"><div style="text-align:center"><!--noindex--><a rel="nofollow" href="http://www.jetbrains.com/webstorm/?utm_source=javascript.ru&amp;utm_medium=banner&amp;utm_campaign=webstorm"><img src="events_crossbrowser_files/webstorm.png" width="200" height="170"></a><!--/noindex--></div>


</td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-block-2" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-block-2')"><img id="collapseimg_block-block-2" src="events_crossbrowser_files/collapse_thead.gif" alt="" border="0"></a>
		
		Содержание
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-block-2" style="">

<tr>
	<td class="alt1">
<div style="padding-left: 10px">

<h2 id="guru-js" class="chapter-header">Учебник javascript</h2>


<ul class="book-tree book-tree-short book-tree-top" style="margin-bottom:0"><li class="leaf book-tree-3930"><a href="http://javascript.ru/tutorial/intro" class="book-tree-link-1">Введение</a></li><li class="collapsed book-tree-4125"><a href="http://javascript.ru/tutorial/foundation" class="book-tree-link-1">Основы javascript</a></li><li class="collapsed book-tree-605"><a href="http://javascript.ru/tutorial/dom" class="book-tree-link-1">DOM: работа с HTML-страницей</a></li><li class="collapsed book-tree-445"><a href="http://javascript.ru/tutorial/events" class="book-tree-link-1">События</a></li><li class="collapsed book-tree-443"><a href="http://javascript.ru/tutorial/object" class="book-tree-link-1">Объекты, ООП</a></li><li class="leaf book-tree-453"><a href="http://javascript.ru/tutorial/ajax" class="book-tree-link-1">AJAX</a></li><li class="leaf book-tree-6202"><a href="http://javascript.ru/tutorial/regexp-specials" class="book-tree-link-1">Особенности регулярных выражений в Javascript</a></li></ul>

<h2 id="language" class="chapter-header">Основные элементы языка</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="leaf book-tree-107"><a href="http://javascript.ru/basic/types" class="book-tree-link-1">Базовые типы: Строки, Числа, Boolean</a></li><li class="leaf book-tree-112"><a href="http://javascript.ru/basic/operators" class="book-tree-link-1">Операторы, их особенности в JS</a></li><li class="leaf book-tree-110"><a href="http://javascript.ru/basic/array" class="book-tree-link-1">Массивы </a></li><li class="leaf book-tree-121"><a href="http://javascript.ru/basic/functions" class="book-tree-link-1">Функции</a></li><li class="leaf book-tree-680"><a href="http://javascript.ru/basic/closure" class="book-tree-link-1">Замыкания </a></li><li class="leaf book-tree-105"><a href="http://javascript.ru/basic/regular-expression" class="book-tree-link-1">Регулярные выражения</a></li><li class="leaf book-tree-113"><a href="http://javascript.ru/basic/syntax-switch-for" class="book-tree-link-1">Конструкции языка. Обработка ошибок.</a></li></ul>
<h2 id="tools" class="chapter-header">Сундучок с инструментами</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="collapsed book-tree-596"><a href="http://javascript.ru/tools/development" class="book-tree-link-1">Редактирование и отладка скриптов</a></li><li class="collapsed book-tree-434"><a href="http://javascript.ru/tools/cookie" class="book-tree-link-1">Cookie</a></li><li class="collapsed book-tree-437"><a href="http://javascript.ru/tools/http-debug" class="book-tree-link-1">HTTP-Отладка</a></li><li class="collapsed book-tree-436"><a href="http://javascript.ru/tools/html-source" class="book-tree-link-1">Просмотр живого HTML</a></li><li class="collapsed book-tree-454"><a href="http://javascript.ru/tools/plugin" class="book-tree-link-1">Разное полезное</a></li></ul>

<h2 id="ui" class="chapter-header">Интерфейсы</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="leaf book-tree-1593"><a href="http://javascript.ru/ui/draganddrop" class="book-tree-link-1">Drag and drop</a></li><li class="leaf book-tree-708"><a href="http://javascript.ru/ui/tree" class="book-tree-link-1">Грамотное javascript-дерево за 7 шагов</a></li><li class="leaf book-tree-1418"><a href="http://javascript.ru/ui/ajax" class="book-tree-link-1">Интеграция AJAX в интерфейс</a></li><li class="leaf book-tree-1676"><a href="http://javascript.ru/ui/offset" class="book-tree-link-1">Координаты элемента на странице</a></li><li class="leaf book-tree-6174"><a href="http://javascript.ru/ui/show-hide-toggle" class="book-tree-link-1">Правильные show/hide/toggle</a></li><li class="leaf book-tree-1419"><a href="http://javascript.ru/ui/ajaxtree" class="book-tree-link-1">Удобное дерево с AJAX-подгрузкой</a></li></ul>

<h2 id="ajax" class="chapter-header">Все об AJAX</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="leaf book-tree-69"><a href="http://javascript.ru/ajax/intro" class="book-tree-link-1">Введение в Ajax</a></li><li class="leaf book-tree-71"><a href="http://javascript.ru/ajax/rich-client" class="book-tree-link-1">Ajax и Rich Client</a></li><li class="leaf book-tree-72"><a href="http://javascript.ru/ajax/client-server" class="book-tree-link-1">Ajax и клиент-серверная архитектура.</a></li><li class="collapsed book-tree-441"><a href="http://javascript.ru/ajax/transport" class="book-tree-link-1">Способы общения с сервером</a></li><li class="collapsed book-tree-440"><a href="http://javascript.ru/AJAX/COMET" class="book-tree-link-1">COMET</a></li><li class="leaf book-tree-68"><a href="http://javascript.ru/ajax/formats" class="book-tree-link-1">Форматы данных для AJAX</a></li><li class="leaf book-tree-85"><a href="http://javascript.ru/ajax/cross-domain-scripting" class="book-tree-link-1">Обмен данными для документов с разных доменов</a></li><li class="leaf book-tree-5225"><a href="http://javascript.ru/ajax/cross-origin-2" class="book-tree-link-1">Обмен данными между доменами. Часть 2.</a></li></ul>

<h2 id="optimize" class="chapter-header">Оптимизация</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="collapsed book-tree-5768"><a href="http://javascript.ru/optimize/google-closure-compiler" class="book-tree-link-1">Google Closure Compiler в деталях</a></li><li class="leaf book-tree-400"><a href="http://javascript.ru/optimize/performance-rules" class="book-tree-link-1">Yahoo: лучшие способы ускорения сайта</a></li><li class="leaf book-tree-65"><a href="http://javascript.ru/optimize/yslow" class="book-tree-link-1">Анализ оптимизации страниц c Yslow</a></li><li class="leaf book-tree-723"><a href="http://javascript.ru/optimize/antimvc" class="book-tree-link-1">Интерфейсы. Прочь от MVC</a></li><li class="leaf book-tree-142"><a href="http://javascript.ru/optimize/javascript-performance" class="book-tree-link-1">Оптимизация Javascript-кода</a></li><li class="leaf book-tree-10975"><a href="http://javascript.ru/optimize/documentfragment-0" class="book-tree-link-1">Польза от documentFragment</a></li><li class="leaf book-tree-140"><a href="http://javascript.ru/optimize/javascript-compression" class="book-tree-link-1">Сжатие Javascript и CSS</a></li><li class="leaf book-tree-778"><a href="http://javascript.ru/optimize/better-compression" class="book-tree-link-1">Улучшаем сжимаемость Javascript-кода. </a></li><li class="leaf book-tree-710"><a href="http://javascript.ru/optimize/cache-versioning" class="book-tree-link-1">Умное Кеширование и Версионность в Javascript/CSS</a></li></ul>
<h2 id="misc" class="chapter-header">Разное</h2>
<ul class="book-tree book-tree-short book-tree-top"><li class="collapsed book-tree-449"><a href="http://javascript.ru/unsorted/async" class="book-tree-link-1">Асинхронное программирование</a></li><li class="leaf book-tree-4908"><a href="http://javascript.ru/unsorted/google-gears" class="book-tree-link-1">Google Gears в деталях</a></li><li class="leaf book-tree-707"><a href="http://javascript.ru/unsorted/bridge-to-flash" class="book-tree-link-1">Javascript &lt;-&gt; Flash мост</a></li><li class="leaf book-tree-896"><a href="http://javascript.ru/unsorted/bookmarklet" class="book-tree-link-1">Букмарклеты и правила их написания</a></li><li class="leaf book-tree-151"><a href="http://javascript.ru/unsorted/book-choice" class="book-tree-link-1">О подборке книг на сайте</a></li><li class="leaf book-tree-807"><a href="http://javascript.ru/unsorted/why_href_js_is_bad" class="book-tree-link-1">Почему &lt;a href="javascript:..."&gt; - плохо</a></li><li class="leaf book-tree-10695"><a href="http://javascript.ru/unsorted/id" class="book-tree-link-1">Способы идентификации в интернете</a></li><li class="leaf book-tree-4176"><a href="http://javascript.ru/unsorted/w3c" class="book-tree-link-1">Уровни DOM</a></li><li class="leaf book-tree-717"><a href="http://javascript.ru/unsorted/read" class="book-tree-link-1">Что почитать?</a></li><li class="leaf book-tree-798"><a href="http://javascript.ru/unsorted/templating" class="book-tree-link-1">Шаблонизация с javascript</a></li><li class="leaf book-tree-809"><a href="http://javascript.ru/unsorted/selenium-rc++" class="book-tree-link-1">Юнит-тесты уровня браузера на связке Selenium + PHP.</a></li><li class="leaf book-tree-394"><a href="http://javascript.ru/unsorted/html-css-manual" class="book-tree-link-1">Справочники: Javascript/HTML/CSS</a></li><li class="leaf book-tree-5783"><a href="http://javascript.ru/unsorted/google-closure-library-build" class="book-tree-link-1">Система сборки и зависимостей Google Closure Library</a></li><li class="leaf book-tree-683"><a href="http://javascript.ru/unsorted/storage" class="book-tree-link-1">Хранение данных на клиенте. DOM Storage и его аналоги.</a></li><li class="leaf book-tree-1016"><a href="http://javascript.ru/unsorted/top-10-functions" class="book-tree-link-1">10 лучших функций на JavaScript</a></li></ul>
<p style="text-align:right;margin-bottom:0"><a href="http://javascript.ru/doctree">Дерево всех статей</a></p>
</div>

</td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-vbforumblocks-1" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-vbforumblocks-1')"><img id="collapseimg_block-vbforumblocks-1" src="events_crossbrowser_files/collapse_thead.gif" alt="" border="0"></a>
		
		Последние обсуждения на форуме
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-vbforumblocks-1" style="">

<tr>
	<td class="alt1"><div class="item-list"><ul><li><a href="http://javascript.ru/forum/showthread.php?t=26042&amp;goto=newpost" title="Здраствуйте, подскажите пожалуйста, как сделать скрипт, находящий все элементы с классом 'body' и заменяющего его на класс 'pBody'?" rel="nofollow">Изменить класс</a>
</li><li><a href="http://javascript.ru/forum/showthread.php?t=26014&amp;goto=newpost" title="http://shamansir.github.com/JavaScript-Garden/#types.typeof

я вообще не понял либо авторы тупят либо я, Тайпоф не возвращает класс или тип обьекта. Он возвращает то, к какому из нативнйх типов данных принадлежит операнд:

string undefined function number object boolean

авторы этого не знают? О_О Или они просто считают это неправильным? 

Но по моему это правильно! Класс обьекта нужно определять по другому! Тут просто определяется тип данных." rel="nofollow">Непонятки с оператором typeof</a>
</li><li><a href="http://javascript.ru/forum/showthread.php?t=25972&amp;goto=newpost" title="Добрый день!
есть код следущего вида
for (var i = 0; i &amp;lt; count_day; i++) {
	if ($(&amp;quot;.ui-datepicker-calendar td&amp;quot;) != undefined) {
		if ($(&amp;quot;.ui-datepicker-calendar td&amp;quot;).className == &amp;quot; calendar_event&amp;quot;) {
			if (parseInt($(&amp;quot;.ui-datepicker-calendar td&amp;quot;).getElementsByTagName('a').innerHTML) &amp;lt; 10) {
				var dd = &amp;quot;0&amp;quot;+$(&amp;quot;.ui-datepicker-calendar td&amp;quot;).getElementsByTagName('a').innerHTML.toString();
			} else {
				var dd = $(&amp;quot;.ui-datepicker-calendar td&amp;quot;).getElementsByTagName('a').innerHTML;
			}
			$.post(&amp;quot;/ch/check_events.php&amp;quot;, {d: '2012-' + mon_num + '-' + dd + ' 00:00:00'}, function(s){
				if (s == 1) {$(&amp;quot;.ui-datepicker-calendar td&amp;quot;).className = &amp;quot;calendar_event&amp;quot;;}
				else {$(&amp;quot;.ui-datepicker-calendar td&amp;quot;).className = &amp;quot;&amp;quot;;}
			console.log(i);
			});
		}
	}
}
у меня постоянно пост запрос возвращает последнее значение. спросил у коллеги, сказал надо делать замыкание, но КАК не сказал?
может Вы подскажите как мне сделать замыкание? или как решить данную проблему" rel="nofollow">замыкание в пост запросе</a>
</li><li><a href="http://javascript.ru/forum/showthread.php?t=26045&amp;goto=newpost" title="Как узнать тип элемента (a, div, span, input, textarea и т.д.), зная его id?" rel="nofollow">Тип элемента по ид</a>
</li><li><a href="http://javascript.ru/forum/showthread.php?t=25915&amp;goto=newpost" title="как перечислить и изменить Event Listnerы на элементе?" rel="nofollow">перечислить и изменить Event Listnerы на элементе</a>
</li><li><a href="http://javascript.ru/forum/showthread.php?t=5437&amp;goto=newpost" title="Возможно ли средствами js проверить существование файла по пути (www.mysite.com/files/file1.zip)? Либо проверить такую ссылку на 403 или 404?" rel="nofollow">Проверка существования файла</a>
</li><li><a href="http://javascript.ru/forum/showthread.php?t=26048&amp;goto=newpost" title="добрый день!столкнулся с проблемой с этим редактором.Есть задача вставлять по нажатию на ссылку  текст этой ссылки в любое место редактора,т.е. мы пишем текст.потом жмем на ссылку и текст добавляется на место курсора.Спасибо." rel="nofollow">Вставка текста в cleditor</a>
</li></ul></div><a style="display: block; text-align: right;" href="http://javascript.ru/forum/">Forum</a></td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-block-16" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-block-16')"><img id="collapseimg_block-block-16" src="events_crossbrowser_files/collapse_thead.gif" alt="" border="0"></a>
		
		Последние комментарии
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-block-16" style="">

<tr>
	<td class="alt1"><div class="view view-comments-recent"><div class="view-content view-content-comments-recent"><div class="item-list"><ul><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/courses#comment-15097">Объясните пжлс что означает эта фраза:</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">Гошка (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>2 часа 45 минут</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/ecma/part4#comment-15096">Обычная документация, тем более это...</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">гость (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>7 часов 18 минут</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/php/strlen#comment-15094">Не удержался.</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">Mitrich (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>13 часов 33 минуты</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/Math.random#comment-15093">Math.Random(0,56); - случайное число от...</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">Лев (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>16 часов 27 минут</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/window.close#comment-15090">Для доступа к свойствам текущего окна...</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">Гость (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>17 часов 51 минута</em> назад</div></div>
</li></ul></div></div></div>
</td>
</tr>

</tbody>

</table>
<script>
var ACUholder = document.getElementById('ajaxCartUpdateHolder')
var ACU = document.getElementById('ajaxCartUpdate')
if (ACU) ACUholder.parentNode.removeChild(ACUholder) 
else ACUholder.setAttribute('id', 'ajaxCartUpdate')
</script>
</td>

</tr>
</tbody></table>



<script type="text/javascript">a2a_linkname="Кросс-браузерное добавление и обработка событий";a2a_linkurl="http://javascript.ru/tutorial/events/crossbrowser";</script><script type="text/javascript" src="events_crossbrowser_files/page.js"></script>


<br>

	</td>
</tr>
</tbody></table>
<!-- / close content container -->
<!-- /content area table -->
</td></tr>
</tbody></table><!-- / content table --></td>
</tr>
<tr>

	<td class="footer-row"><table class="page" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr>
	
	<td class="tfoot" width="100%" align="right">

		<div class="smallfont" style="height:31px;line-height:31px;text-align:center">


		

			<strong>
<span style="padding-right: 20px;">© Илья Кантор, 2007-2011</span> 

<a href="http://javascript.ru/about-project" rel="nofollow">О проекте</a> -

				<a href="http://javascript.ru/contact" rel="nofollow">Обратная связь</a> -
				
				


				
				<a href="#top" onclick="self.scrollTo(0, 0); return false;">Вверх</a>
			</strong>

		</div>
	</td>
</tr>
<tr>
<td style="text-align: center; color: gray; font-size: 12px;">


 <a href="http://www.tvpager.ru/" target="_blank">программа передач на сегодня</a> <!--339ad47d--><style>
ul.c3a741 {
padding: 0 !important;
margin: 0 !important;
}
.c3a741 li {
list-style: none !important;
padding: 2px !important;
text-align: left !important;
display:inline;
}
.c3a741 li div{
display:inline;
}
</style>
<ul class="c3a741">

  <li>
    <div><a href="http://www.cbh-beauty.ru/services/hardware/photoepil/">Фотоэпиляция стоимость</a></div>
<div class="text">Дермато-косметологическая клиника. Центр пластической хирургии.</div>
<div class="host">cbh-beauty.ru</div>

  </li>

  <li>
    <div><a href="http://mbtorg.ru/">Франшиза</a></div>
<div class="text">Банковские новости. Крупных городов России.</div>
<div class="host">mbtorg.ru</div>

  </li>

  <li>
    <div><a href="http://motorezina.net/motorezina/1/33/">Maxxis</a></div>
<div class="text">Система поиска. Интернет-магазин шин и дисков.</div>
<div class="host">motorezina.net</div>

  </li>

</ul><!--339ad47d-->  
</td>
</tr>
</tbody></table><!-- / footer table --></td>
</tr>
</tbody></table><!-- / main table -->




<script type="text/javascript" src="events_crossbrowser_files/scripts.js"></script>


<script type="text/javascript">vBulletin_init()</script>


</div>

<div style="display:none">



<!-- Yandex.Metrika counter -->
<div style="display:none;"><script type="text/javascript">
(function(w, c) {
    (w[c] = w[c] || []).push(function() {
        try {
            w.yaCounter1178660 = new Ya.Metrika(1178660);
             yaCounter1178660.trackLinks(true);
        
        } catch(e) { }
    });
})(window, 'yandex_metrika_callbacks');
</script></div>
<script src="events_crossbrowser_files/watch.js" type="text/javascript" defer="defer"></script>
<noscript><div><img src="//mc.yandex.ru/watch/1178660" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

 <!-- #wrapper -->

</div><table style="position: absolute; display: none;" class="editor-popup" id="editor-dialog"><tbody><tr class="head even"><td class="title"></td><td class="close"><a>x</a></td></tr><tr class="body odd"><td colspan="2" class="content"></td></tr></tbody></table></body></html>